/* ============================================================================
   KULTOWE ALKOHOLE — Design tokens
   Źródło prawdy: Figma "Kultowe alkohole – workshop" (iq7X3mNnGDWhlI80XYgbvs)
   Style guide node 627:4193 · DS/Komponenty 578:593.
   Dwie warstwy: (1) BAZOWE (paleta/skala) → (2) SEMANTYCZNE (komponentowe).
   Edycja koloru komponentu = zmiana JEDNEJ zmiennej semantycznej.
   ============================================================================ */

:root {
  /* ---------- BAZOWE: Brand / KA Gold ---------- */
  --gold-900: #382A13;
  --gold-700: #715326;
  --gold-500: #BC8B40;   /* primary accent / CTA highlight */
  --gold-400: #CBA264;
  --gold-300: #E6D1B1;
  --gold-200: #F3E8D8;
  --gold-100: #F9F3EB;   /* delikatne tło sekcji (gold wash) */

  /* ---------- BAZOWE: Brand / KA Navy ---------- */
  --navy-900: #161821;   /* dark surfaces / footer / kontakt */
  --navy-800: #2B2F40;
  --navy-700: #232739;
  --navy-500: #888FAF;
  --navy-400: #B6BACE;
  --navy-200: #E3E5ED;
  --navy-100: #F6F6F9;   /* delikatne tło sekcji (navy wash) */

  /* ---------- BAZOWE: Interface / Neutral ---------- */
  --neutral-900: #0A0A0A;
  --neutral-800: #262626;
  --neutral-700: #525252;
  --neutral-500: #A1A1A1;
  --neutral-400: #D4D4D4;
  --neutral-200: #E5E5E5;
  --neutral-100: #F5F5F5;
  --neutral-50:  #FFFFFF;

  /* ---------- BAZOWE: Tekst ---------- */
  --text-prime:        #262626;   /* na jasnym tle */
  --text-second:       #525252;   /* na jasnym tle, drugorzędny */
  --text-prime-dark:   #F5F5F5;   /* na ciemnym tle */
  --text-second-dark:  #B6BACE;   /* na ciemnym tle, drugorzędny */
  --text-accent:       #BC8B40;

  /* ---------- BAZOWE: Typografia ---------- */
  --font-base: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* skala rozmiarów (px → rem @16) */
  --fs-display-xl: 6rem;     /* 96 */
  --fs-display-l:  4rem;     /* 64 */
  --fs-h1:         3rem;     /* 48 */
  --fs-h2:         2rem;     /* 32 */
  --fs-h3:         1.5rem;   /* 24 */
  --fs-h4:         1.25rem;  /* 20 */
  --fs-h5:         1.125rem; /* 18 */
  --fs-body-l:     1.125rem; /* 18 */
  --fs-body-m:     1rem;     /* 16 */
  --fs-body-s:     0.875rem; /* 14 */
  --fs-overline:   1rem;     /* 16 — Button/Overline */
  --fs-overline-s: 0.875rem; /* 14 */
  --fs-caption:    0.75rem;  /* 12 */
  --fs-micro:      0.6875rem;/* 11 */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  --lh-tight: 1.0;
  --lh-snug: 1.2;
  --lh-normal: 1.4;
  --lh-relaxed: 1.6;

  --ls-overline: 0.04em;   /* 0.64 @16 */
  --ls-overline-s: 0.043em;/* 0.60 @14 */
  --ls-body: 0.02em;
  --ls-caption: -0.03em;

  /* ---------- BAZOWE: Spacing (siatka 4px) ---------- */
  --sp-1: 0.25rem;  /* 4  */
  --sp-2: 0.5rem;   /* 8  */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.25rem;  /* 20 */
  --sp-6: 1.5rem;   /* 24 */
  --sp-8: 2rem;     /* 32 */
  --sp-10: 2.5rem;  /* 40 */
  --sp-12: 3rem;    /* 48 */
  --sp-16: 4rem;    /* 64 */
  --sp-20: 5rem;    /* 80 */
  --sp-24: 6rem;    /* 96 */
  --sp-32: 8rem;    /* 128 */

  /* ---------- BAZOWE: Radius (premium, subtelne) ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* ---------- BAZOWE: Cienie ---------- */
  --shadow-xs: 0 1px 2px rgba(22, 24, 33, 0.06);
  --shadow-sm: 0 2px 8px rgba(22, 24, 33, 0.08);
  --shadow-md: 0 8px 24px rgba(22, 24, 33, 0.10);
  --shadow-lg: 0 16px 48px rgba(22, 24, 33, 0.14);

  /* ---------- BAZOWE: Ruch ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 600ms;
  --reveal-shift: 18px;      /* przesunięcie w górę przy scroll-reveal */
  --reveal-stagger: 90ms;    /* kaskada list/siatek */

  /* ---------- BAZOWE: z-index ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-menu: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* ---------- BAZOWE: Layout ---------- */
  --maxw: 1440px;          /* szerokość projektu Figma */
  --maxw-narrow: 1120px;
  --maxw-text: 720px;
  --gutter: clamp(1rem, 4vw, 5rem);   /* boczne marginesy */
  --header-h: 90px;
  --header-h-mobile: 64px;

  /* ---------- Breakpointy (referencja; @media nie podstawia var()) ---------- */
  --bp-xs: 320px;
  --bp-sm: 360px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;
  --bp-2xl: 1920px;

  /* ========================================================================
     SEMANTYCZNE (komponentowe) — mapowane na bazowe
     ======================================================================== */

  /* Powierzchnie / tła */
  --bg-page: var(--neutral-50);
  --bg-wash-navy: var(--navy-100);
  --bg-wash-gold: var(--gold-100);
  --bg-dark: var(--navy-900);
  --surface-card: var(--neutral-50);
  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-400);

  /* Przycisk primary (ciemny navy) */
  --btn-primary-bg: var(--navy-900);
  --btn-primary-bg-hover: var(--navy-800);
  --btn-primary-fg: var(--neutral-50);
  --btn-primary-border: var(--navy-900);

  /* Przycisk secondary (gold) */
  --btn-secondary-bg: var(--gold-500);
  --btn-secondary-bg-hover: var(--gold-400);
  --btn-secondary-fg: var(--navy-900);
  --btn-secondary-border: var(--gold-500);

  /* Przycisk ghost / outline */
  --btn-ghost-bg: transparent;
  --btn-ghost-bg-hover: var(--neutral-100);
  --btn-ghost-fg: var(--navy-900);
  --btn-ghost-border: var(--neutral-400);

  /* Przycisk na ciemnym tle */
  --btn-ondark-bg: var(--neutral-50);
  --btn-ondark-bg-hover: var(--gold-300);
  --btn-ondark-fg: var(--navy-900);

  /* Pole formularza */
  --field-bg: var(--neutral-50);
  --field-fg: var(--text-prime);
  --field-placeholder: var(--neutral-500);
  --field-border: var(--neutral-400);
  --field-border-hover: var(--neutral-500);
  --field-border-focus: var(--navy-900);
  --field-border-error: #C0392B;
  --field-label: var(--text-second);

  /* Chip / kategoria */
  --chip-bg: var(--neutral-100);
  --chip-fg: var(--text-prime);
  --chip-bg-active: var(--navy-900);
  --chip-fg-active: var(--neutral-50);
  --chip-border: var(--neutral-200);

  /* Karta */
  --card-bg: var(--neutral-50);
  --card-border: var(--neutral-200);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  /* Overline (nadtytuł sekcji) */
  --overline-fg: var(--gold-500);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(188, 139, 64, 0.45);

  /* Statusy */
  --success-bg: #EAF6EE; --success-border: #BfE3CB; --success-text: #1E7A43;
  --warning-bg: #FBF3E2; --warning-border: #EBD7A6; --warning-text: #8A6D1A;
  --error-bg:   #FBEAE8; --error-border:  #E8C3BE; --error-text:  #B03A2E;
  --info-bg:    var(--navy-100); --info-border: var(--navy-200); --info-text: var(--navy-800);

  /* Toast */
  --toast-bg: var(--navy-900);
  --toast-fg: var(--neutral-50);
}