/* ═══════════════════════════════════════════════════════════
   TOKENS — JEDYNE źródło wyglądu.
   Zmiana koloru/typografii/odstępu/promienia = TYLKO ten plik.
   Źródło prawdy dla wartości: DESIGN.md. Wartości w OKLCH
   (kanoniczne) z komentarzem hex dla szybkiej orientacji.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── KOLORY: papier i atrament (ciepły krem — papier kredowy) ── */
  --paper:            oklch(94% 0.022 85);     /* #F2EADB  tło strony */
  --surface-raised:   oklch(97.3% 0.012 85);   /* #FAF6ED  karty, pola w spoczynku */
  --surface-sunken:   oklch(91% 0.026 85);     /* #E9E0CE  studnie, tło suwaka */
  --ink:              oklch(24% 0.004 70);     /* #232220  tekst, znak na jasnym */
  --ink-muted:        oklch(45% 0.01 74);      /* #59554F  tekst pomocniczy */
  --ink-faint:        oklch(62% 0.012 78);     /* #8A857E  placeholder, disabled */
  --hairline:         oklch(86.5% 0.025 84);   /* #DAD2C1  dzielarki, obramowania kart */
  --hairline-strong:  oklch(79.5% 0.028 84);   /* #C5BBA8  obramowania pól */

  /* ── KOLOR: akcent marki — ≤10% ekranu ──
        JEDNO POKRĘTŁO: zmień --accent-h (kąt barwy 0-360), by przemalować cały akcent.
        Przykłady: 27=bordo (obecnie), 150=zieleń, 210=błękit, 265=fiolet, 145=szmaragd.
        Jasność/nasycenie zostają dostrojone per rola; przy bardzo jasnych barwach
        (żółć ~90) podnieś chromę ręcznie. Nazwy „bordeaux” zostają historycznie. */
  --accent-h: 158;
  --bordeaux:         oklch(40% 0.065 var(--accent-h));   /* CTA, wybór, akcent (przygaszona zieleń pod papier) */
  --bordeaux-deep:    oklch(33% 0.057 var(--accent-h));   /* hover/pressed */
  --bordeaux-tint:    oklch(92% 0.022 var(--accent-h));   /* tło elementu wybranego */

  /* ── KOLORY: semantyka stanów (NIE marka, tylko proces) ── */
  --success:          oklch(48% 0.08 150);     /* #3A6A45  krok/pole poprawne */
  --success-tint:     oklch(93.4% 0.022 150);  /* #DFEEE2 */
  --danger:           oklch(52% 0.16 28);      /* #B33830  twardy błąd */
  --danger-tint:      oklch(93.4% 0.022 28);   /* #F8E4E1 */
  --amber:            oklch(49% 0.105 66);     /* #88520A  uwaga, "co przygotować" */
  --amber-tint:       oklch(92% 0.032 80);     /* #F0E3CD */

  /* ── TYPOGRAFIA: rodziny ── */
  --font-serif: "DM Serif Text", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ── TYPOGRAFIA: skala (baza 17px pod czytelność / wiek 50+) ──
        Hierarchia jest parzysta: każdy poziom nagłówka ma SWÓJ lead. Nagłówek
        i lead z tego samego szczebla zawsze idą razem - nie miesza się ich.

          h1  --fs-display      + --fs-lead-hero
          h2  --fs-headline     + --fs-lead
          h3  --fs-card-title   + --fs-lead-card   (nagłówek karty)
          h3  --fs-title                           (etykieta w kreatorze)

        Zmiana rozmiaru leadu = jeden token, nie polowanie po komponentach. */
  --fs-display:    clamp(2.25rem, 3.8vw, 3.75rem);
  --fs-headline:   clamp(1.625rem, 2.6vw, 2.25rem);
  --fs-card-title: clamp(1.1rem, 1.9vw, 1.25rem);
  --fs-title:      1.125rem;
  --fs-body:       1.0625rem;   /* 17px */
  --fs-small:      0.9375rem;
  --fs-label:      0.8125rem;

  --fs-lead-hero:  clamp(1.125rem, 1.3vw, 1.25rem);     /* lead pod h1 - jedyny, który rośnie */
  --fs-lead:       1.125rem;                            /* lead pod h2 - stały, we wszystkich sekcjach */
  --fs-lead-card:  var(--fs-body);                      /* lead pod h3 w karcie - tekst czytany, nie ozdobny */
  --lh-tight:    1.05;
  --lh-heading:  1.15;
  --lh-body:     1.6;
  --measure:     68ch;        /* maks. długość wiersza tekstu */

  /* ── ODSTĘPY — jedyna skala, baza 4px (każda wartość = wielokrotność 4) ──
        Reguła (lean/standaryzacja): odstępy WYŁĄCZNIE z tych tokenów, zero surowych px.
        Skala modularna (rośnie ~1.5-2×), nie liniowa - większe kroki = większy oddech.
        Standard wnętrza karty: padding --sp-lg/--sp-md (40/24), tytuł↔lead --sp-sm (16). */
  --sp-2xs: 4px;    /* mikro: linia tytuł↔podtytuł */
  --sp-xs:  8px;    /* tytuł↔opis w karcie, drobne gapy */
  --sp-sm:  16px;   /* gap w rzędzie kart, wewnątrz komponentu */
  --sp-md:  24px;   /* padding boczny karty, gap kolumn */
  --sp-lg:  40px;   /* padding pionowy karty, odstęp bloku */
  --sp-xl:  64px;   /* duży odstęp, sticky top */
  --sp-2xl: 96px;   /* separacja sekcji */

  /* ── PROMIENIE ── */
  --r-sm: 8px;    /* pola, przyciski */
  --r-md: 12px;   /* kafelki, panele */
  --r-lg: 20px;   /* karta kroku */
  --r-full: 999px;

  /* ── CIENIE (płasko w spoczynku; ciepłe, nie czarne) ── */
  --shadow-step: 0 1px 2px rgba(35, 34, 32, 0.04), 0 16px 40px -12px rgba(35, 34, 32, 0.10);
  --focus-ring: 0 0 0 3px oklch(40% 0.065 var(--accent-h) / 0.18);   /* akcent w niskiej alfie (podąża za --accent-h) */

  /* ── MOTION (ease-out, bez bounce) ── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-step: 320ms;

  /* ── LAYOUT ── */
  /* Wąskie marginesy (designerskie): do 1920px włącznie rządzi wyłącznie --shell-pad,
     limit wchodzi dopiero na ultrawide/4K, gdzie treść inaczej by się rozjechała. */
  --shell-max:  1920px;   /* maks. szerokość treści landingu i podstron */
  --wizard-max: 1320px;   /* maks. szerokość kreatora; do niej równa się też pasek idle */
  --shell-pad: clamp(16px, 2.5vw, 32px);   /* wąski margines boczny (redesign foto: zdjęcia dochodzą do krawędzi) */
  --panel-max: 960px;     /* maks. szerokość panelu kroku (mieści 3 karty) */
  --shell-edge: max(var(--shell-pad), calc((100vw - var(--shell-max)) / 2));   /* padding sekcji full-bleed = linia siatki .shell */
  --nav-h: 68px;          /* wysokość paska nawigacji (offset dla nav fixed na stronie głównej) */
  --touch-min: 44px;      /* min. cel dotykowy */

  /* Szerokość okna zdjęcia (desktop): jedna wartość dla hero, "Jak to działa"
     i "Zasady". Musi być w vw - photo-frame liczy z niej kadr (patrz components.css).
     Kolumna tekstowa bierze resztę (1fr). */
  --photo-w: 45vw;

  /* ── LANDING (tylko strona główna): rytm sekcji + tekst na bordo ── */
  --sp-section: clamp(88px, 12vw, 152px);            /* oddech między blokami landingu */
  --on-bordeaux-muted: oklch(88% 0.028 var(--accent-h));  /* tekst pomocniczy na pasie akcentu */
  --on-bordeaux-faint: oklch(80% 0.05 var(--accent-h));   /* etykiety na pasie akcentu */
  --hairline-on-bordeaux: rgba(242, 234, 219, 0.22); /* dzielarki na pasie bordo */
  --focus-ring-on-bordeaux: 0 0 0 3px rgba(242, 234, 219, 0.35); /* fokus na bordo (bordowy ring byłby niewidoczny) */
}

/* Ruch wspierający, nigdy konieczny — respekt dla preferencji użytkownika */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-step: 0.01ms;
  }
}