/* =============================================================
   HBT 7.0 — Design Tokens
   -------------------------------------------------------------
   Single source of truth dla wszystkich wartości designu.
   Wszystkie inne CSSy odwołują się TYLKO przez --hbt-* (nie hex).
   Powód: zmiana brand color → 1 linia, nie grep przez 15k linii.
   ============================================================= */

:root {
    /* === KOLORY: BRAND === */
    --hbt-primary:        #8BC34A; /* HBT zielony — accenty, focus, linki */
    --hbt-primary-dark:   #7CB342; /* hover na primary */
    --hbt-primary-deep:   #558B2F; /* przyciski z białym tekstem (AA pass ~5.1:1) */
    --hbt-primary-light:  #AED581; /* subtelne podświetlenia, borders */
    --hbt-primary-tint:   #F1F8E9; /* tła sekcji, alerts success */

    --hbt-accent-deep:    #1A2332; /* sekcje premium "Maszyny" */
    --hbt-accent-deep-2:  #243043; /* odmiana */

    /* === KOLORY: INK (neutrals) === */
    --hbt-ink-900:        #0F1419; /* main text */
    --hbt-ink-700:        #2D3748; /* secondary text */
    --hbt-ink-500:        #718096; /* metadata, captions */
    --hbt-ink-400:        #94A3B8; /* placeholders */
    --hbt-ink-300:        #CBD5E0; /* borders */
    --hbt-ink-200:        #E2E8F0; /* dividers */
    --hbt-ink-100:        #F7FAFC; /* section bg */
    --hbt-ink-50:         #FAFBFC; /* very light bg */
    --hbt-ink-0:          #FFFFFF;

    /* === KOLORY: SEMANTIC === */
    --hbt-success:        #16A34A;
    --hbt-success-bg:     #DCFCE7;
    --hbt-warning:        #EAB308;
    --hbt-warning-bg:     #FEF3C7;
    --hbt-danger:         #DC2626;
    --hbt-danger-bg:      #FEE2E2;
    --hbt-info:           #0EA5E9;
    --hbt-info-bg:        #E0F2FE;

    /* === TYPOGRAPHY === */
    --hbt-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --hbt-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Roboto Mono', monospace;

    --hbt-fs-xs:   0.75rem;   /*  12px */
    --hbt-fs-sm:   0.875rem;  /*  14px */
    --hbt-fs-base: 1rem;      /*  16px */
    --hbt-fs-lg:   1.125rem;  /*  18px */
    --hbt-fs-xl:   1.25rem;   /*  20px */
    --hbt-fs-2xl:  clamp(1.5rem,   1.3rem + 1vw,   2rem);    /* 24-32 */
    --hbt-fs-3xl:  clamp(1.875rem, 1.5rem + 2vw,   2.5rem);  /* 30-40 */
    --hbt-fs-4xl:  clamp(2.25rem,  1.8rem + 2.5vw, 3rem);    /* 36-48 */
    --hbt-fs-5xl:  clamp(2.75rem,  2.2rem + 3vw,   3.75rem); /* 44-60 */

    --hbt-lh-tight:  1.15;
    --hbt-lh-snug:   1.3;
    --hbt-lh-normal: 1.5;
    --hbt-lh-relaxed: 1.65;

    --hbt-fw-normal: 400;
    --hbt-fw-medium: 500;
    --hbt-fw-semi:   600;
    --hbt-fw-bold:   700;

    --hbt-tracking-tight:  -0.015em;
    --hbt-tracking-normal: 0;
    --hbt-tracking-wide:   0.02em;

    /* === SPACING (8pt grid) === */
    --hbt-s-1:  4px;
    --hbt-s-2:  8px;
    --hbt-s-3:  12px;
    --hbt-s-4:  16px;
    --hbt-s-5:  20px;
    --hbt-s-6:  24px;
    --hbt-s-8:  32px;
    --hbt-s-10: 40px;
    --hbt-s-12: 48px;
    --hbt-s-16: 64px;
    --hbt-s-20: 80px;
    --hbt-s-24: 96px;
    --hbt-s-32: 128px;

    /* === LAYOUT === */
    --hbt-container:      1280px;  /* main wrapper */
    --hbt-container-wide: 1440px;  /* hero, marquees */
    --hbt-container-narrow: 800px; /* artykuły, formularze */
    --hbt-gutter:         24px;

    /* === RADIUS === */
    --hbt-r-sm:   6px;    /* inputy, małe pill */
    --hbt-r-md:   12px;   /* karty produktu, sekcje */
    --hbt-r-lg:   20px;   /* hero, modal */
    --hbt-r-xl:   28px;
    --hbt-r-full: 9999px; /* avatary, tagi */

    /* === SHADOWS === */
    --hbt-shadow-sm:  0 1px 2px rgba(15, 20, 25, 0.06);
    --hbt-shadow-md:  0 4px 12px rgba(15, 20, 25, 0.08);
    --hbt-shadow-lg:  0 12px 32px rgba(15, 20, 25, 0.12);
    --hbt-shadow-xl:  0 24px 48px rgba(15, 20, 25, 0.16);
    --hbt-shadow-ring: 0 0 0 3px rgba(139, 195, 74, 0.35); /* focus */

    /* === MOTION === */
    --hbt-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --hbt-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    --hbt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --hbt-dur-fast:   120ms;
    --hbt-dur-base:   220ms;
    --hbt-dur-slow:   400ms;

    /* === BREAKPOINTS (do referencji w JS, CSS używa @media bezpośrednio) === */
    --hbt-bp-sm:  640px;
    --hbt-bp-md:  768px;
    --hbt-bp-lg:  1024px;
    --hbt-bp-xl:  1280px;
    --hbt-bp-2xl: 1536px;

    /* === Z-INDEX === */
    --hbt-z-base:     1;
    --hbt-z-dropdown: 100;
    --hbt-z-sticky:   200;
    --hbt-z-overlay:  500;
    --hbt-z-modal:    1000;
    --hbt-z-toast:    1500;
    --hbt-z-max:      9999;
}

/* Respektuj prefers-reduced-motion — wyłącz wszystkie animacje */
@media (prefers-reduced-motion: reduce) {
    :root {
        --hbt-dur-fast: 0ms;
        --hbt-dur-base: 0ms;
        --hbt-dur-slow: 0ms;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}