/* ==========================================================================
   important.is — Design Token Core
   Źródło prawdy dla figmatoreact. Fluid (clamp), skalowanie 375 → 1440px.
   Rem base = 62.5% (1rem = 10px). Słownik zgodny z theme.css important.is.
   --------------------------------------------------------------------------
   Sekcje:
     1. Rem base + reset bazowy
     2. Kolory (oficjalny core + rozszerzenia dla ciemnego homepage)
     3. Typografia (rodziny, skala fluid, wagi, line-height)
     4. Spacing (8pt grid, fluid) + aliasy gap
     5. Radius, layout, cienie, motion, breakpoints
   ========================================================================== */

:root {

  /* ======================================================================
     2. KOLORY
     ====================================================================== */

  /* --- Oficjalny core (light) — przenośność z theme.css --- */
  --color-bg:            #ffffff;
  --color-surface:       #f5f5f5;
  --color-surface-warm:  #f2efe9;
  --color-text:          #1a1a1a;
  --color-muted:         #6b7280;
  --color-border:        #e5e7eb;

  /* --- Accent (brand) --- */
  --color-accent:            #FF3434;
  --color-accent-hover:      #e62e2e;
  --color-accent-hover-light:#ff4848;  /* jaśniejszy hover (lift) przycisków/CTA */
  --color-accent-dark:       #c41f1a;  /* ciemniejszy akcent — gradienty          */
  --color-accent-bg:     rgba(255, 52, 52, 0.08);
  --color-accent-glow:   rgba(255, 52, 52, 0.05);
  --color-accent-15:     rgba(255, 52, 52, 0.15);

  /* --- Oficjalne ciemne powierzchnie --- */
  --color-dark:          #1b1b1b;
  --color-dark-surface:  #252525;
  --color-dark-text:     #ffffff;
  --color-dark-muted:    rgba(255, 255, 255, 0.3);

  /* --- Semantic --- */
  --color-success:       #22a559;
  --color-warning:       #f59e0b;
  --color-error:         #ef4444;
  --color-info:          #3b82f6;

  /* --- Rozszerzenia dla ciemnego homepage (figma-v3) --- */
  --surface-base:        #0b0b0b;   /* tło strony            (≈ neutral-900) */
  --surface-raised:      #121212;   /* karty / kafle         (≈ neutral-800) */
  --surface-hover:       #161616;   /* hover karty                          */
  --color-ink:           #edebe7;   /* kremowy tekst na ciemnym (brand-ink) */
  --color-cream:         #fffcf5;   /* kremowa karta case                   */
  --color-case-blue:     #2a3a88;   /* case "woda"                          */
  --color-case-blue-mark:#5fb3e8;   /* jasny znacznik marki "woda"          */
  --color-case-orange:   #c45200;   /* case "Jelenia Szama"                 */
  --color-neutral-500:   #474747;   /* przygaszony szary                    */

  /* --- Alpha inki (tekst na ciemnym, baza #edebe7) --- */
  --ink-90:  rgba(237, 235, 231, 0.90);
  --ink-62:  rgba(237, 235, 231, 0.62);
  --ink-50:  rgba(237, 235, 231, 0.50);
  --ink-48:  rgba(237, 235, 231, 0.48);
  --ink-28:  rgba(237, 235, 231, 0.28);

  /* --- Subtelne powierzchnie (białe alpha) --- */
  /* UWAGA: bez hairline borderów (--line-*) — separacja kontrastem/odstępem. */
  --surface-04: rgba(255, 255, 255, 0.04);
  --surface-03: rgba(255, 255, 255, 0.03);

  /* ======================================================================
     3. TYPOGRAFIA
     ====================================================================== */

  /* --- Rodziny --- */
  --font-sans:        'Rubik', system-ui, -apple-system, sans-serif;
  --font-decorative:  'Mansalva', cursive;

  /* --- Skala fluid (clamp, 375 → 1440px, rem base 10px) --- */
  --font-hero:    clamp(4.0rem, 6.385vw + 1.606rem, 10.8rem); /* 40 → 108  Hero title   */
  --font-display: clamp(4.0rem, 2.254vw + 3.155rem, 6.4rem);  /* 40 → 64   Liczby / staty */
  --font-h1:      clamp(3.2rem, 1.878vw + 2.496rem, 5.2rem);  /* 32 → 52   Tytuł sekcji L */
  --font-h2:      clamp(2.6rem, 1.690vw + 1.966rem, 4.4rem);  /* 26 → 44   Tytuł sekcji   */
  --font-h3:      clamp(2.2rem, 0.563vw + 1.989rem, 2.8rem);  /* 22 → 28   Tytuł karty    */
  --font-h4:      clamp(2.0rem, 0.376vw + 1.859rem, 2.4rem);  /* 20 → 24   Headline case  */
  --font-h5:      clamp(1.8rem, 0.188vw + 1.730rem, 2.0rem);  /* 18 → 20   Małe heading   */
  --font-body:    clamp(1.5rem, 0.094vw + 1.465rem, 1.6rem);  /* 15 → 16   Body           */
  --font-label:   clamp(1.3rem, 0.094vw + 1.265rem, 1.4rem);  /* 13 → 14   Nav / meta     */
  --font-caption: clamp(1.2rem, 0.094vw + 1.165rem, 1.3rem);  /* 12 → 13   Caption        */
  --font-eyebrow: clamp(1.0rem, 0.094vw + 0.965rem, 1.1rem);  /* 10 → 11   Eyebrow        */

  /* --- Wagi --- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* --- Line-height --- */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ======================================================================
     4. SPACING (8pt grid, fluid 375 → 1440px)
     ====================================================================== */
  --space-1: clamp(0.4rem, 0.376vw + 0.259rem, 0.8rem);  /*  4 →  8 */
  --space-2: clamp(0.8rem, 0.751vw + 0.518rem, 1.6rem);  /*  8 → 16 */
  --space-3: clamp(1.2rem, 1.127vw + 0.777rem, 2.4rem);  /* 12 → 24 */
  --space-4: clamp(1.6rem, 1.502vw + 1.037rem, 3.2rem);  /* 16 → 32 */
  --space-5: clamp(2.4rem, 2.254vw + 1.555rem, 4.8rem);  /* 24 → 48 */
  --space-6: clamp(3.2rem, 3.005vw + 2.073rem, 6.4rem);  /* 32 → 64 */
  --space-7: clamp(4.8rem, 4.507vw + 3.110rem, 9.6rem);  /* 48 → 96 */
  --space-8: clamp(6.4rem, 6.009vw + 4.146rem, 12.8rem); /* 64 →128 */
  --space-9: clamp(9.6rem, 9.014vw + 6.220rem, 19.2rem); /* 96 →192 */

  /* Semantic aliasy */
  --gap-s:  var(--space-4);   /* 16 → 32  gap elementów   */
  --gap-m:  var(--space-5);   /* 24 → 48  gap komponentów */
  --gap-l:  var(--space-6);   /* 32 → 64  wnętrze sekcji  */
  --gap-xl: var(--space-8);   /* 64 →128  zewnętrze sekcji*/

  /* ======================================================================
     5. RADIUS / LAYOUT / CIENIE / MOTION / BREAKPOINTS
     ====================================================================== */

  /* --- Radius --- */
  --radius-xs:   0.4rem;
  --radius-sm:   0.8rem;
  --radius-md:   1.2rem;
  --radius-lg:   1.4rem;
  --radius-xl:   clamp(1.2rem, 0.751vw + 0.918rem, 1.6rem);  /* 12 → 16 */
  --radius-2xl:  clamp(2.0rem, 2.254vw + 1.155rem, 3.2rem);  /* 20 → 32 */
  --radius-full: 999rem;

  /* --- Layout --- */
  --max-width:      178rem;   /* 1780px */
  --container-page: 76.8rem;  /*  768px — kolumna treści homepage */
  --reading-width:  72ch;
  --page-padding:   clamp(2.0rem, 2.817vw + 0.944rem, 5.0rem); /* 20 → 50 */

  /* --- Cienie --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

  /* --- Motion --- */
  --ease-out:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* --- Breakpoints (referencja; media queries używają wartości px) --- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;
}

/* ==========================================================================
   1. Rem base — 1rem = 10px (wymagane przez tokeny rem powyżej)
   ========================================================================== */
html { font-size: 62.5%; }