/**
 * tokens.css — system tokenów motywu Dobre Ciepło
 *
 * Źródło: analiza 4993 atrybutów style w sześciu makietach
 *         (_context/mockups/html/), pomiar getComputedStyle przy 1440 px.
 * Pełny raport z uzasadnieniami: docs/tokens-analysis.md
 *
 * ZASADY
 * 1. Motyw ciemny podmienia WYŁĄCZNIE kolory. Para product.html/product-dark.html
 *    jest identyczna w 99,8% na właściwościach niekolorowych — typografia,
 *    odstępy i promienie są wspólne i zdefiniowane tu tylko raz.
 * 2. Nagłówki są płynne (clamp), tekst akapitowy stały. To dwa osobne mechanizmy.
 * 3. Liczba przy tokenie = wystąpienia w makietach. "scala:" = co zostało zlane.
 */

/* ==========================================================================
   1. KRÓJ
   ========================================================================== */
:root {
  /* scala: 'Plus Jakarta Sans' (740) + 'Plus Jakarta Sans',sans-serif (66) */
  --dc-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* 806 */
  /* scala: 'Inter',sans-serif (71) + 'Inter',system-ui,sans-serif (5) */
  --dc-font-body: 'Inter', system-ui, -apple-system, sans-serif;                /*  76 */

  /* ==========================================================================
     2. SKALA NAGŁÓWKÓW — PŁYNNA
     Makieta nie ma media queries (poza prefers-reduced-motion), tylko clamp().
     Powyżej ~1280 px stoją na suficie, poniżej 768 px na podłodze.
     22 wyrażenia clamp() zlane do 5 skupisk sufitów.
     ========================================================================== */
  --dc-display-1: clamp(40px, 5.0vw, 58px);  /*  5  h1 hero;  scala sufity 64/58/54/52 */
  --dc-display-2: clamp(34px, 4.4vw, 48px);  /* 25  h2 duże;  scala sufity 48/46       */
  --dc-display-3: clamp(30px, 3.8vw, 40px);  /* 16  h2;       scala sufity 44/42/40    */
  --dc-display-4: clamp(26px, 3.2vw, 34px);  /* 38  h2 małe;  scala sufity 38/36/34    */
  --dc-display-5: clamp(22px, 2.6vw, 28px);  /* 11  h3 duże;  scala sufity 32/30/28    */

  /* ==========================================================================
     3. SKALA TEKSTU I INTERFEJSU — STAŁA
     Pomiar potwierdził: rozmiar akapitu nie zmienia się od 390 do 1920 px.
     Połówki pikseli to artefakt eksportu — te same deklaracje (ten sam krój,
     waga i kolor) występują w makiecie raz z 13px, raz z 13.5px. Scalone w dół.
     ========================================================================== */
  --dc-text-3xs: 9px;    /*  52  scala: 8 / 8.5 / 9 / 9.5   — etykieta pod parametrem */
  --dc-text-2xs: 10px;   /* 121  scala: 10 / 10.5                                     */
  --dc-text-xs: 11px;    /* 297  scala: 11 / 11.5           — eyebrow, znacznik       */
  --dc-text-sm: 12px;    /* 290  scala: 12 / 12.5                                     */
  --dc-text-base: 13px;  /* 381  scala: 13 / 13.5           — najczęstszy rozmiar     */
  --dc-text-md: 14px;    /* 337  scala: 14 / 14.5           — nawigacja, przyciski    */
  --dc-text-lg: 15px;    /* 238  scala: 15 / 15.5 / 16.5                              */
  --dc-text-xl: 16px;    /*  51                                                       */
  --dc-text-2xl: 17px;   /*  57                             — h3 najczęstsze          */
  --dc-text-3xl: 18px;   /*  33                             — h3                      */
  --dc-text-4xl: 20px;   /*  63                             — h3 duże                 */
  --dc-text-5xl: 22px;   /*  10  scala: 22 / 23                                       */
  --dc-text-6xl: 24px;   /*  14  scala: 24 / 26                                       */

  /* ==========================================================================
     4. LICZEBNIKI DEKORACYJNE — STAŁE, CELOWO
     To NIE są nagłówki pominięte przy przejściu na clamp. Kontekst jest zawsze
     ten sam: Plus Jakarta Sans 800, line-height 1 lub .6, kolor złoty z alfą —
     numery kroków w sekcjach "jak to działa" i znaki cudzysłowu w opiniach.
     Numer kroku nie ma się zmniejszać razem z nagłówkiem obok.
     ========================================================================== */
  --dc-numeral-sm: 30px; /* 21  liczba w kafelku statystyki */
  --dc-numeral-md: 40px; /* 12  numer kroku                 */
  --dc-numeral-lg: 44px; /* 46  numer kroku, znak cudzysłowu */

  /* ==========================================================================
     5. WAGA
     ========================================================================== */
  --dc-weight-medium: 600; /* 351 */
  --dc-weight-bold: 700;   /* 573 */
  --dc-weight-black: 800;  /* 526  scala: 500 (3 użycia na 1453 — szum) -> 600 */

  /* ==========================================================================
     6. INTERLINIA
     ========================================================================== */
  --dc-leading-none: 1;       /*  93  scala: 1 / 1.02 / 1.03 / 1.05 / 1.06 / 1.08 */
  --dc-leading-tight: 1.12;   /*  66  scala: 1.1 / 1.12 / 1.2   — nagłówki         */
  --dc-leading-snug: 1.4;     /*  13  scala: 1.3 / 1.4 / 1.45                      */
  --dc-leading-normal: 1.55;  /*  65  scala: 1.5 / 1.55                            */
  /* Dominanta to 1.6 (137 użyć). Wybrana zamiast środka skupiska (1.65),
     żeby nie wydłużać każdego wielowierszowego akapitu o ~3% — patrz raport 10.5. */
  --dc-leading-relaxed: 1.6;  /* 245  scala: 1.6 / 1.62 / 1.65 / 1.68 / 1.7 / 1.72 */
  /* To nie jest interlinia tekstu, tylko sposób na optyczne wyśrodkowanie
     dużego glifu (cudzysłów, ikona). Nie "naprawiać". */
  --dc-leading-icon: 0.6;     /*  40 */

  /* ==========================================================================
     7. ŚWIATŁO MIĘDZYLITEROWE
     Zapisy -.02em i -0.02em to ta sama liczba zapisana dwoma sposobami.
     ========================================================================== */
  --dc-tracking-tighter: -0.03em; /*  43  scala: -0.030 / -0.035 / -0.040 */
  --dc-tracking-tight: -0.02em;   /* 114  scala: -0.020 / -0.025 / -0.028 */
  --dc-tracking-snug: -0.01em;    /*  95                                   */
  --dc-tracking-normal: 0;
  --dc-tracking-wide: 0.06em;     /*  50  scala: 0.02 / 0.04 / 0.05 / 0.06 / 0.07 */
  --dc-tracking-wider: 0.12em;    /* 123  scala: 0.08 / 0.10 / 0.12 / 0.13 / 0.14 */
  --dc-tracking-widest: 0.18em;   /*  80  scala: 0.16 / 0.18 / 0.20 / 0.22        */

  /* ==========================================================================
     8. ODSTĘPY — SIATKA 2 PX, NIE 4 PX
     Sprawdzone przed zaokrągleniem: z 4858 wystąpień tylko 48,7% to
     wielokrotności 4 px, ale 83,7% jest parzystych. Ciąg 10/14/18/22/26
     jest w makiecie tak samo mocny jak 8/12/16/20/24 — to krok 4 px
     w dwóch fazach, czyli krok 2 px. Wymuszenie siatki 4 px ruszyłoby
     połowę wartości w projekcie.
     Nazwa = wartość w pikselach (krotność, nie skala nazw).
     79,8% wartości trafia dokładnie; 13,8% przesuwa się o 1 px.
     ========================================================================== */
  --dc-space-0: 0;      /* 864 */
  --dc-space-2: 2px;    /* 208 */
  --dc-space-4: 4px;    /* 130  scala: 3 / 4                  */
  --dc-space-6: 6px;    /* 275  scala: 5 / 6                  */
  --dc-space-8: 8px;    /* 296  scala: 7 / 8                  */
  --dc-space-10: 10px;  /* 553  scala: 9 / 10  — NAJCZĘSTSZY  */
  --dc-space-12: 12px;  /* 308  scala: 11 / 12                */
  --dc-space-14: 14px;  /* 350  scala: 13 / 14                */
  --dc-space-16: 16px;  /* 302  scala: 15 / 16                */
  --dc-space-18: 18px;  /* 187  scala: 17 / 18                */
  --dc-space-20: 20px;  /* 240  scala: 19 / 20                */
  --dc-space-22: 22px;  /* 247                                */
  --dc-space-24: 24px;  /* 147                                */
  --dc-space-28: 28px;  /* 150  scala: 26 / 28                */
  --dc-space-32: 32px;  /* 211  scala: 30 / 32 / 34           */
  --dc-space-40: 40px;  /*  69  scala: 36 / 38 / 40 / 42      */
  --dc-space-48: 48px;  /*  56  scala: 44 / 46 / 48           */
  --dc-space-56: 56px;  /*  26  scala: 52 / 56                */
  --dc-space-64: 64px;  /*  71  scala: 60 / 64  — oddech sekcji */
  --dc-space-80: 80px;  /*  20  scala: 72 / 80 / 88 / 100     */

  /* To nie odstęp, tylko konstrukcja: padding 1.5px na elemencie z gradientowym
     tłem tworzy złotą obwódkę gradientową. Zaokrąglenie do 2 px pogrubiłoby
     każdą taką obwódkę o 33%. */
  --dc-ring-inset: 1.5px; /* 143 */

  /* ==========================================================================
     9. PROMIEŃ
     18 px zachowane jako osobny stopień (decyzja). 20 px scalone do 22 px,
     nie do 18 px, bo koreluje z wielkością karty: 18 px występuje przy
     padding 19–28 px, a 20 i 22 px przy padding 30–36 px.
     ========================================================================== */
  --dc-radius-6: 6px;    /*  28  scala: 6 / 7                       */
  --dc-radius-8: 8px;    /*  27  scala: 8 / 9 / 10                  */
  --dc-radius-12: 12px;  /*  93  scala: 11 / 12 / 13                */
  --dc-radius-16: 16px;  /* 196  scala: 14 / 15 / 16                */
  --dc-radius-18: 18px;  /* 150  bez scaleń — najczęstszy promień karty */
  --dc-radius-22: 22px;  /* 115  scala: 20 / 22                     */
  --dc-radius-28: 28px;  /* 149  scala: 24 / 26 / 28 / 30 / 32 / 34 */
  --dc-radius-pill: 99px; /* 173  przyciski, pigułki                */
  --dc-radius-full: 50%;  /* 321  awatary, ikony w kole             */

  /* ==========================================================================
     10. OBRAMOWANIE, KONTENER, WARSTWY, RUCH
     ========================================================================== */
  --dc-border: 1px;         /* 748 */
  --dc-border-thick: 1.5px; /*  17 */
  --dc-border-heavy: 2px;   /*   6 */

  --dc-container: 1240px;   /*  88  szerokość główna       */
  /* Sekcja wąska: węższa od kontenera, ale szersza od kolumny tekstu ciągłego.
     Makieta stawia tak sekcje czytane wierszami pełnej szerokości — dziś FAQ
     na trzech stronach. scala: 900 (3) / 960 (1) / 840 (1) */
  --dc-measure-2xl: 900px;  /*   5                          */
  --dc-measure-xl: 680px;   /*  11                          */
  --dc-measure-lg: 640px;   /*  18  kolumna tekstu          */
  --dc-measure-md: 480px;   /*  30  scala: 460 / 470 / 480 / 520 */
  --dc-measure-sm: 400px;   /*  18  scala: 400 / 420        */
  --dc-measure-xs: 340px;   /*  13  scala: 300 / 340 / 360  */

  /* Progi zwijania siatek. Makieta buduje siatki przez
     repeat(auto-fit, minmax(Npx, 1fr)) — 73 z 97 wystąpień grid-template-columns —
     czyli myśli MINIMALNĄ SZEROKOŚCIĄ KOLUMNY, nie liczbą kolumn. Zachowuję ten
     sposób: liczba kolumn wynika z dostępnej szerokości, siatka zwija się sama
     i nie potrzebuje ani jednego breakpointu. */
  --dc-grid-min-sm: 220px; /*  22  scala: 180 / 200 / 220 / 236 / 240 */
  --dc-grid-min-md: 280px; /*  24  scala: 260 / 280 / 300             */
  --dc-grid-min-lg: 320px; /*  27  scala: 320 / 340 / 380             */

  /* blur(16px) i blur(16px) saturate(170%) to ta sama warstwa szkła */
  --dc-blur-sm: blur(10px);                 /* 25  scala: 8 / 10 / 12 / 14 px */
  --dc-blur-md: blur(16px) saturate(175%);  /* 35  scala: 16 / 18 px          */
  --dc-blur-lg: blur(20px) saturate(165%);  /* 21                             */
  --dc-blur-xl: blur(36px) saturate(190%);  /* 47  scala: 30 / 34 / 36 / 40 / 44 px */

  --dc-duration-fast: 0.15s;   /* ~10                              */
  --dc-duration-base: 0.2s;    /* 297  scala: .2s / .22s           */
  --dc-duration-slow: 0.25s;   /*  92  scala: .25s / .26s / .28s / .3s */
  --dc-duration-slower: 0.35s; /* ~15                              */
  --dc-ease: ease;
  --dc-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* 60  krzywa makiety */

  /* Czas pełnego obrotu złotej obwódki (--dc-ring, patrz base.css).
     To osobna kategoria od --dc-duration-*: tamte opisują reakcję na
     działanie użytkownika i trwają ułamek sekundy, ten opisuje ruch ciągły
     w tle. Jeden w obu motywach: od partii 5 audytu obwódki różnią się
     między sobą fazą i zwrotem (rejestr w components/ring.css), nie tempem
     i nie motywem. Drugi token, --dc-duration-ring-slow (11 s, „obrót
     w motywie ciemnym"), usunięty w partii 6 bez aliasu — nie miał już
     ani jednego użycia (design-audit.md, C.6). */
  --dc-duration-ring: 7s;

  /* Czasy unoszenia (dcFloat / dcFloatSlow w makiecie) — ta sama kategoria
     „ruch ciągły w tle", co obrót obwódki, i przypadkiem te same dwie liczby.
     Osobne tokeny, a nie użycie tamtych: to dwa niezależne ruchy na jednym
     ekranie. Ktoś, kto zwolni obrót obwódki, nie chce przy okazji zwolnić
     unoszenia worka — a przy wspólnym tokenie nie miałby jak tego rozdzielić.
     Zmierzone w makietach: dcFloat 7 s w 4 plikach, dcFloatSlow 11 s w 6. */
  --dc-duration-float: 7s;      /* plakietka, drobny element  */
  --dc-duration-float-slow: 11s;/* duży obraz produktu        */

  --dc-z-base: 1;
  --dc-z-raised: 2;
  --dc-z-sticky: 10;
  --dc-z-overlay: 50;
  --dc-z-modal: 100;
}

/* ==========================================================================
   11. KOLOR — MOTYW JASNY
   Mapowanie jasny->ciemny wyprowadzone z pary product.html/product-dark.html,
   która jest identyczna strukturalnie w 99,8%. Odpowiedniki są zmierzone,
   nie zgadnięte.

   KONTRAST: wszystkie współczynniki policzone po złożeniu alfy na realnym tle,
   nie na wartości nominalnej. Próg WCAG 2.1 AA = 4,5:1 (tekst zwykły),
   3:1 (tekst duży i elementy nietekstowe).
   ========================================================================== */
:root {
  /* Tło strony wzięte z bloku <style> w <head> makiety (getComputedStyle).
     UWAGA DO POTWIERDZENIA: #eef1f4 jest wyraźnie CHŁODNE (niebieskawe),
     podczas gdy cała reszta palety jest ciepła — #F4F1EA, #2A2620, złoto.
     Podejrzewam, że to tło płótna eksportu z Claude Design, a nie docelowe
     tło sklepu; cieplejszym odpowiednikiem byłoby ok. #F4F2EE.
     Zostawione jak w makiecie do czasu potwierdzenia. Patrz raport 9.5. */
  --dc-bg: #eef1f4;
  --dc-surface: #ffffff;                     /*  19 */
  --dc-surface-glass: rgba(255, 255, 255, 0.86); /*  34  karta ze szkłem; scala: .72–.88 */
  /* Lżejsze szkło — pasek pod hero, gdzie tło strony ma prześwitywać.
     Osobny token, a nie scalenie z --dc-surface-glass: różnica .5 wobec .86
     to nie szum, tylko dwie różne intencje. Przy .86 pasek staje się
     nieprzezroczystą białą belką i gubi efekt szkła. */
  --dc-surface-glass-soft: rgba(255, 255, 255, 0.5);
  --dc-surface-sunken: rgba(0, 0, 0, 0.04);  /*  12  pole wklęsłe */
  --dc-surface-inverse: #1C1A17;             /*  36  panel odwrócony */

  /* Przyciemnienie strony pod oknem modalnym. home.html:1103.
     Nie jest ani powierzchnią, ani cieniem: powierzchnia to tło elementu,
     cień to jego obrys, a to jest warstwa ODCINAJĄCA całą stronę od okna,
     rozciągnięta na okno przeglądarki. Dlatego osobna nazwa, a nie alfa
     doklejona do --dc-surface-inverse.
     Barwa jest CHŁODNA (28,32,44) i to nie pomyłka eksportu — pod spodem
     leży rozmycie, które i tak zbiera kolory strony; chłodny tusz je studzi.
     Wartość dosłownie z makiety, bez scalania do --dc-shadow-color
     (30,40,60): różnica jest widoczna na 46% krycia. */
  --dc-overlay: rgba(28, 32, 44, 0.46);

  /* --- tekst: cztery stopnie --- */
  --dc-text: #161616;                        /* 337  15,96:1 na tle / 17,79:1 na karcie — OK */
  --dc-text-secondary: #3a3a3a;              /* 117  10,03:1 / 11,18:1 — OK */
  --dc-text-muted: #5a5a5a;                  /* 127   6,08:1 /  6,78:1 — OK */

  /* KOREKTA KONTRASTU (wariant A). Makieta ma #9a958a = 2,63:1 na tle strony
     i 2,93:1 na karcie — poniżej progu także dla tekstu dużego.
     Wartość podniesiona; ton (ciepła szarość) zachowany.
     scala: #9a958a (185) / #7a7568 (17) / #c9c3b6 (10) / #aaa498 (2) */
  --dc-text-subtle: #6E6A61;                 /* 210   4,75:1 /  5,30:1 — OK (makieta: 2,63:1) */

  /* --- tekst na ciemnych panelach wewnątrz motywu jasnego ---
     Rodzina -on-dark ma DWA zachowania i trzeba je znać, zanim się po nią
     sięgnie. Trzy tokeny TEKSTU niżej PRZEŁĄCZAJĄ SIĘ z motywem: w ciemnym
     biorą krem --dc-text (#F4F1EA), bo makieta ciemna maluje tekst na tych
     panelach kremem (122 wystąpienia #F4F1EA wobec 11 #fff w home-dark.html),
     a panel w motywie ciemnym jest częścią ciemnej strony, nie wyspą.
     Pozostałe tokeny -on-dark (--dc-surface-on-dark, --dc-success-on-dark,
     --dc-shadow-*-on-dark) są STAŁE w obu motywach. Zmierzony koszt
     usztywnienia tekstu: 61 elementów w motywie ciemnym zmieniłoby kolor
     wbrew makiecie (partia 6 audytu) — dlatego zostaje jak jest.
     Powierzchnia nigdy nie bierze tokenu tekstu: patrz --dc-surface-on-dark. */
  --dc-text-on-dark: #ffffff;                /* 105  15,04:1 na #2A2620 — OK; scala: biel .85–1 */
  --dc-text-on-dark-muted: rgba(255, 255, 255, 0.6);  /*  81  6,25:1 — OK; scala: .5–.66 */
  --dc-text-on-dark-subtle: rgba(255, 255, 255, 0.4); /*  88  3,66:1 — tylko tekst duży; scala: .3–.48 */
  /* JASNA POWIERZCHNIA NA PANELU CIEMNYM W OBU MOTYWACH (karta kalkulatora
     w loyalty-cta). Nie może brać --dc-surface ani --dc-text-on-dark: oba
     przełączają się z motywem (#fff -> #F4F1EA), a karta ma być jednym
     odcieniem zawsze — obie makiety rysują ją jako rgba(255,255,255,.93)
     (home.html:662, home-dark.html:629). Do partii 4 audytu karta brała
     --dc-text-on-dark i w motywie ciemnym wychodziła kremowa
     (design-audit.md, E.6). Stała, niezależna od motywu. */
  --dc-surface-on-dark: #ffffff;

  /* --- złoto --- */
  --dc-accent: #C9A84C;                      /*  56 tekst / 115 tło. Jako TEKST na jasnym
                                                    tle 2,02:1 — wyłącznie dekoracja i wypełnienia. */

  /* --dc-accent-text NIE ISTNIEJE w motywie jasnym — usunięty w partii 3
     audytu (design-audit.md, C.3; decyzja z 2026-08-30). Makietowe #9a8230
     (3,30:1) niosło pięć tekstów i kilkanaście kresek ikon obok 65 tekstów
     na --dc-accent-strong: jedna rola, dwa odcienie. Celowo BEZ aliasu —
     dwie nazwy na jedną wartość wracają za rok jako pytanie, której użyć.
     Złoty tekst i złota kreska ikony na jasnym tle biorą --dc-accent-strong.
     W motywie ciemnym token jest zadeklarowany nadal (sekcja 11), bo tam ma
     własną wartość. */
  --dc-accent-strong: #7c6420;               /*  31   5,01:1 /  5,58:1 — OK; scala: #5a4a16 (4) */
  /* Od partii 3 wyłącznie przystanek --dc-gradient-gold: fuel-switch, jedyna
     sekcja z tym złotem jako tekstem, zszedł na --dc-accent (C.3). */
  --dc-accent-light: #e8cf8a;

  /* KOREKTA KONTRASTU (wariant A). Makieta ma #7c6420 na złotym gradiencie CTA,
     czyli 4,32:1 u góry i 3,95:1 u dołu przycisku — główne CTA sklepu poniżej progu.
     #1a1200 już występuje w makiecie w tej samej roli (38 użyć).
     scala: #1a1200 / #1a1208 / #221a06 / #231A05 */
  --dc-on-accent: #1a1200;                   /*  38  14,13:1 i 12,93:1 na gradiencie CTA;
                                                     8,13:1 na pełnym #C9A84C — OK */

  /* KOREKTA KONTRASTU (wariant A). Makieta ma #3e7c59 = 4,38:1 na tle strony
     (brakowało 0,12). Na białej karcie makietowa wartość przechodziła (4,88:1).
     scala: #3e7c59 (39) / #2f7d52 (2) / #5a8a6a (2) / #4caf72 (19, tło) */
  --dc-success: #35704E;                     /*  41   5,18:1 /  5,77:1 — OK (makieta: 4,38:1) */
  /* Zieleń na ciemnych panelach wewnątrz motywu jasnego: wartość motywu
     ciemnego, STAŁA w obu motywach — inaczej niż --dc-text-on-dark, który
     się przełącza (komentarz przy rodzinie tekstu wyżej). --dc-success daje na panelu help-cta (#1C1A17) 2,96:1, kropka statusu
     gasła w jasnym motywie; ten odcień daje tam 8,85:1
     (design-audit.md, partia 3). */
  --dc-success-on-dark: #7ec99a;

  /* --- błąd --- */
  /* Jedyna czerwień w palecie. Makiety nie mają stanu błędu w polu, a bez
     tokenu nie da się go zbudować w zgodzie z regułą „zero literałów"
     (design-audit.md, C.7 — [nowy token], partia 6). Rola: krawędź
     i pierścień pola z niepoprawną wartością oraz tekst komunikatu 12 px.
     Odcień ciepły, jak reszta palety. Policzone: 6,57:1 na bieli,
     5,80:1 na tle strony — tekst zwykły przechodzi; jako obwódka 1+1 px
     na białym polu 6,57:1 wobec progu 3:1. */
  --dc-danger: #b42318;

  /* --- obramowania --- */
  --dc-border-subtle: rgba(255, 255, 255, 0.9);  /* 114  obwódka szkła; scala: .65–.95 */
  --dc-border-line: rgba(228, 226, 220, 0.9);    /*  23 */
  --dc-border-accent: rgba(201, 168, 76, 0.3);   /* 140  scala: .22–.35 */

  /* Cień w makiecie jasnej jest niebieskawy, nie czarny. Tylko kanał koloru
     zmienia się między motywami — geometria jest identyczna. */
  --dc-shadow-color: 30, 40, 60;             /* 186 */
  /* Kanał cienia na panelach ciemnych w OBU motywach (fuel-switch,
     loyalty-cta): czarny, bo granat opisuje cień na jasnym tle strony,
     a na czerni czyta się jako szara obwódka. Motyw ciemny bierze tę samą
     wartość dla całej strony (blok niżej). Tokeny cienia z tym kanałem:
     --dc-shadow-2xl-on-dark / -3xl-on-dark, sekcja 13. */
  --dc-shadow-color-on-dark: 0, 0, 0;

  /* Pierścień fokusu. W makiecie NIE MA go wcale (stany :focus siedzą w support.js),
     a WCAG 2.1 AA wymaga go w 2.4.7, przy kontraście 3:1 wobec tła (1.4.11).
     Samo złoto #C9A84C daje tylko 2,02:1, a rgba(201,168,76,.5) zaledwie 1,4:1 —
     oba odpadają. Użyte --dc-accent-strong, które przełącza się z motywem:
       jasny  #7c6420 -> 5,01:1 wobec tła strony, 5,58:1 wobec białej karty
       ciemny #D8B65E -> 10,20:1 wobec tła strony, 8,91:1 wobec karty */
  --dc-focus-ring: 0 0 0 3px var(--dc-accent-strong);
  --dc-focus-offset: 2px;

  /* --- gradienty powtarzalne (reszta zostaje w CSS sekcji) --- */
  --dc-gradient-gold: linear-gradient(90deg, #C9A84C, #e8cf8a);           /* 18 */
  --dc-gradient-gold-soft: linear-gradient(
    180deg, rgba(236, 214, 150, 0.62), rgba(201, 168, 76, 0.36)
  );                                                                      /* 23  złoty tint pigułki */

  /* Wypełnienie GŁÓWNEGO przycisku akcji. W motywie jasnym to dokładnie ten
     sam gradient co wyżej — i mimo to osobny token, bo w motywie ciemnym te
     dwie role się rozjeżdżają, dokładnie jak para glass / glass-soft:
       --dc-gradient-gold-soft  zostaje półprzezroczystym TINTEM (pigułka
                                „Asystent AI" i koszyk w nagłówku niosą na nim
                                złoty tekst — wypełnienie musi przepuszczać tło),
       --dc-gradient-cta        staje się PEŁNYM złotem (makieta home-dark.html:
                                background:#C9A84C), bo niesie ciemny tekst
                                --dc-on-accent, a na półprzezroczystym złocie
                                nad tłem #0B0906 dawałby 1,8:1.
     Podmiana wspólnego tokenu popsułaby nagłówek, więc rozdzielenie ról jest
     tu jedynym wyjściem zgodnym z regułą 10 (różnica kolorów -> token). */
  --dc-gradient-cta: var(--dc-gradient-gold-soft);

  /* --- obracająca się złota obwódka --- */
  /* Dwa jaśniejsze odcienie złota niż paleta, bo to nie kolor powierzchni
     tylko rozbłysk światła sunącego po krawędzi karty. Wartości scalone
     z obu makiet: .85/.9 oraz #fff8dc/#fffaeb — różnice niedostrzegalne. */
  --dc-ring-glow: rgba(255, 233, 160, 0.85);
  --dc-ring-glow-peak: rgba(255, 248, 220, 0.98);

  /* UWAGA: sam gradient stożkowy łuku NIE MOŻE tu mieszkać.
     var() wewnątrz zmiennej podstawia się przy wyliczaniu wartości na
     elemencie, na którym zmienna jest ZADEKLAROWANA — czyli tutaj, na
     :root, gdzie --dc-ring ma stałe 0deg. Potomkowie odziedziczyliby
     wartość już podstawioną i obwódka stałaby nieruchomo mimo animacji.
     Dlatego conic-gradient() zapisujemy wprost we właściwości background
     elementu obwódki, w CSS sekcji, składając go z tokenów kolorów wyżej. */

  /* Nieruchomy biały refleks na krawędzi. W makiecie użyty wyłącznie
     w motywie ciemnym, gdzie sama poświata nie odcina karty od tła. */
  --dc-gradient-specular: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.98),
    rgba(255, 255, 255, 0.42) 30%,
    rgba(255, 255, 255, 0.16) 55%,
    rgba(255, 255, 255, 0.36) 78%,
    rgba(255, 255, 255, 0.75)
  );

  /* --- drabinka alfy złota (732 wystąpienia w 25 odcieniach -> 6 stopni) --- */
  /* Zero alfy zapisane jako ZŁOTO, nie jako słowo transparent.
     transparent to skrót od rgba(0,0,0,0), więc gradient gasnący do niego
     interpoluje przez przezroczystą czerń i brudzi łuk szarością.
     Ten sam kolor z alfą 0 gaśnie czysto. */
  --dc-accent-a00: rgba(201, 168, 76, 0);
  --dc-accent-a05: rgba(201, 168, 76, 0.05); /*  26  scala: .04 / .05 / .07 / .08 */
  --dc-accent-a10: rgba(201, 168, 76, 0.10); /*  85  scala: .10 / .12 / .13       */
  --dc-accent-a15: rgba(201, 168, 76, 0.15); /* 115  scala: .14 / .15 / .16 / .18 */
  --dc-accent-a20: rgba(201, 168, 76, 0.20); /* 112  scala: .20 / .22 / .25 / .26 */
  --dc-accent-a30: rgba(201, 168, 76, 0.30); /* 228  scala: .28–.36               */
  --dc-accent-a50: rgba(201, 168, 76, 0.50); /* 166  scala: .40–.60               */
}

/* ==========================================================================
   12. KOLOR — MOTYW CIEMNY
   Podmieniane są WYŁĄCZNIE kolory. Żadnej typografii, odstępów ani promieni.
   ========================================================================== */
[data-theme='dark'] {
  --dc-bg: #0B0906;                              /* getComputedStyle na home-dark.html */
  --dc-surface: #1C1A17;                         /*  63  scala: #1a160c / #14110c / #201D19 / #262219 */
  --dc-surface-glass: rgba(255, 250, 242, 0.05); /*  35  scala: .045 / .05 / .055 / .06 */
  /* Ciemne szkło jest CIEMNIEJSZE od tła strony, nie jaśniejsze — karta
     ma się zapadać w tło, a nie z niego wystawać. Światło daje jej dopiero
     obwódka. Dlatego nie da się tego scalić z --dc-surface-glass, które
     rozjaśnia. */
  --dc-surface-glass-soft: rgba(14, 11, 7, 0.58);
  --dc-surface-sunken: rgba(255, 255, 255, 0.09);/*  11 */
  --dc-surface-inverse: #F4F1EA;

  /* home-dark.html:1070. Czerń bez odcienia i o 14 punktów gęstsza niż
     w motywie jasnym — ciemna strona pod oknem ma mniejszy kontrast
     własny, więc słabsze przyciemnienie nie odcięłoby jej od panelu. */
  --dc-overlay: rgba(0, 0, 0, 0.6);

  --dc-text: #F4F1EA;                            /* 233  17,63:1 na tle / 15,39:1 na karcie — OK */
  --dc-text-secondary: rgba(244, 241, 234, 0.74);/*  83   9,68:1 /  8,87:1 — OK */
  --dc-text-muted: rgba(244, 241, 234, 0.58);    /*  93   6,21:1 /  5,94:1 — OK */

  /* KOREKTA KONTRASTU (wariant A). Makieta ma alfę .44 = 3,97:1 na tle i 3,98:1
     na karcie — jedyna para poniżej AA w całym motywie ciemnym. Podniesione do .5.
     To odstępstwo od makiety niewidoczne gołym okiem; powrót = zmiana .5 na .44.
     scala: .44 (131) / .5 (13) / .3 (2) */
  --dc-text-subtle: rgba(244, 241, 234, 0.5);    /* 133   4,84:1 /  4,75:1 — OK (makieta: 3,97:1) */

  --dc-text-on-dark: #F4F1EA;
  --dc-text-on-dark-muted: rgba(244, 241, 234, 0.58);
  --dc-text-on-dark-subtle: rgba(244, 241, 234, 0.5);

  --dc-accent: #C9A84C;                          /*  16 tekst / 55 tło.  8,70:1 — OK */
  --dc-accent-text: #D8B65E;                     /*  67  10,20:1 /  8,91:1 — OK */
  --dc-accent-strong: #D8B65E;
  --dc-accent-light: #e8cf8a;
  --dc-on-accent: #231A05;                       /*  43   7,52:1 na #C9A84C — OK */

  /* Pełne złoto zamiast tintu — patrz komentarz przy --dc-gradient-cta wyżej.
     Zapis jako gradient, a nie kolor, żeby właściwość po obu stronach była
     ta sama (background-image) i sekcja nie musiała wiedzieć, który motyw
     jest aktywny. Kontrast --dc-on-accent na #C9A84C: 7,52:1 — OK. */
  --dc-gradient-cta: linear-gradient(180deg, var(--dc-accent), var(--dc-accent));

  --dc-success: #7ec99a;                         /*  18  10,14:1 /  8,85:1 — OK */
  --dc-danger: #f0837a;                          /* 6,81:1 na karcie / 7,80:1 na tle — OK */

  --dc-border-subtle: rgba(255, 255, 255, 0.12); /*  87  scala: .1 / .12 / .14 */
  --dc-border-line: rgba(255, 250, 242, 0.12);   /*  55  scala: .10 / .12 / .16 */
  --dc-border-accent: rgba(201, 168, 76, 0.3);   /*  66 */

  --dc-shadow-color: var(--dc-shadow-color-on-dark); /* 194 */
}

/* ==========================================================================
   13. CIENIE
   Geometria jest identyczna w obu motywach — zmienia się tylko kanał koloru,
   dlatego 170 zapisów cienia sprowadza się do 8 tokenów.
   Definiowane po obu blokach kolorów, żeby --dc-shadow-color był już ustawiony.
   ========================================================================== */
:root,
[data-theme='dark'] {
  --dc-shadow-xs: 0 1px 3px rgba(var(--dc-shadow-color), 0.05);    /*   6 */
  --dc-shadow-sm: 0 4px 12px rgba(var(--dc-shadow-color), 0.08);   /*  22 */
  --dc-shadow-md: 0 5px 18px rgba(var(--dc-shadow-color), 0.07);   /*  48  najczęstszy */
  --dc-shadow-lg: 0 10px 30px rgba(var(--dc-shadow-color), 0.08);  /*  38 */
  --dc-shadow-xl: 0 16px 44px rgba(var(--dc-shadow-color), 0.14);  /*  21 */
  --dc-shadow-2xl: 0 24px 60px rgba(var(--dc-shadow-color), 0.22); /*  12 */
  /* Okno modalne. home.html:1104 (0 40px 90px rgba(18,22,34,.45)) i
     home-dark.html:1071 — geometria identyczna, zmienia się sam kanał
     koloru, czyli dokładnie wzorzec reguły 13. Nie scalone do --dc-shadow-2xl:
     ten jest półtora raza mniejszy i dwa razy rzadszy (.22 wobec .45).
     Okno leży w warstwie nad CAŁĄ stroną, a nie na sąsiedniej karcie —
     i tylko cień o tej gęstości to pokazuje. */
  --dc-shadow-3xl: 0 40px 90px rgba(var(--dc-shadow-color), 0.45);   /*   1 */
  --dc-shadow-accent: 0 8px 22px rgba(201, 168, 76, 0.3);          /*  18 */
  /* RANGA 1 NA PANELU CIEMNYM W OBU MOTYWACH (help-cta, loyalty-cta): ten sam
     przycisk, inny cień. Złoto .3 na czerni świeci mocniej niż na bieli,
     a poświata 0 8px 22px sięgała zmierzone 34 px pod przycisk — pod podpis,
     który w loyalty-cta stoi 14 px niżej („cień przykrywa tekst"). Geometria
     --dc-shadow-sm z kanałem złota: jeden stopień drabinki cieni niżej, nie
     nowa liczba. Przycisk tego tokenu NIE zna — panel podstawia go pod
     --dc-shadow-accent u siebie, tak jak motyw ciemny podmienia tokeny na
     całej stronie (design-audit.md, partia 3). */
  --dc-shadow-accent-on-dark: 0 4px 12px rgba(201, 168, 76, 0.3);
  /* CIEŃ RZUCANY NA PANELU CIEMNYM W OBU MOTYWACH: geometria --dc-shadow-2xl
     i -3xl, kanał czarny (--dc-shadow-color-on-dark) zamiast granatu.
     Jedyny element na czarnym panelu, który ma cień rzucany, to karta-
     odnośnik w fuel-switch (design-audit.md, C.4: reszta elementów na czerni
     bez cienia — krawędź daje im obwódka biel .1). Spoczynek 2xl, najazd
     3xl = jeden stopień wyżej z tą samą liczbą warstw (C.2). Do partii 4
     karta trzymała to jako literały rgba(0,0,0,.42) i .5 — geometria była
     już tokenowa, tylko alfa spoza drabinki. Element bierze je wprost,
     bo nie ma tu generycznej reguły do podstawienia (inaczej niż
     --dc-shadow-accent-on-dark wyżej). */
  --dc-shadow-2xl-on-dark: 0 24px 60px rgba(var(--dc-shadow-color-on-dark), 0.22);
  --dc-shadow-3xl-on-dark: 0 40px 90px rgba(var(--dc-shadow-color-on-dark), 0.45);
  --dc-shadow-inset-top: inset 0 1px 1px rgba(255, 255, 255, 0.95);/*  74 */
  /* Rozjaśnienie od góry dla tego samego przypadku: przycisk na panelu
     ciemnym w obu motywach nie przełącza się z motywem, więc bierze wartość
     motywu ciemnego w obu — blok ciemny niżej wskazuje na ten sam token. */
  --dc-shadow-inset-top-on-dark: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* Cień WCIŚNIĘCIA: włosowa obwódka wewnętrzna plus cień padający od góry
     do środka. Jeden język dla „wciśnięte" w całym motywie: w nagłówku na
     stałe (bieżąca pozycja nawigacji, przełącznik motywu), na przyciskach
     rang 1–2 na czas kliknięcia (:active). Przeniesiony z header.css, gdzie
     mieszkał jako --dc-header-shadow-pressed (design-audit.md, C.1).
     Złożony z tokenów — grubość obwódki, kolor linii, kanał cienia,
     odstępy — więc w obu motywach przełącza się sam. Dwie warstwy: element,
     który go dokłada do cienia rzucanego, ma na :active o jedną warstwę
     więcej niż w spoczynku — przejście cienia jest wtedy skokiem, co przy
     naciśnięciu jest właściwe (nacisk ma być natychmiastowy). */
  --dc-shadow-inset-press:
    inset 0 0 0 var(--dc-border) var(--dc-border-line),
    inset 0 var(--dc-space-2) var(--dc-space-6) rgba(var(--dc-shadow-color), 0.12);
}

[data-theme='dark'] {
  --dc-shadow-inset-top: var(--dc-shadow-inset-top-on-dark);
}