/* tokens.css — Współdzielone design tokens (CSS custom properties).
 *
 * Source of truth dla palet używanych w wielu plikach. Wcześniej każdy
 * plik miał własną definicję (kadr_step3.css miał :root z --kadr-referral-*,
 * kadr_step1.html duplikował te same wartości jako hardcoded RGB) — audyt
 * 2026-05 Issue 7 wyciągnął tokens do tego pliku.
 *
 * Ładowany na każdej stronie używającej tokens BEFORE main stylesheet'u:
 *   - kadr_step1.html (tło strony, referral info banner, pasek zamówienia)
 *   - kadr_step2.html (tło strony)
 *   - kadr_step3.html (tło strony, referral card, panel, reward row)
 *
 * Zmiana palety = edycja w 1 miejscu, zero rozjazdów. Nowy plik trzymany
 * tiny (tylko zmienne) — szybki cache hit, brak ryzyka kolizji selektorów.
 *
 * Konwencja nazw: `--kadr-<scope>-<role>`. Scope grupuje warianty (np.
 * `referral` to amber accent przez cały funnel — landing banner, step1 banner,
 * step3 card/panel/reward-row). Role to semantyka (bg, border, text-strong).
 * Przy dodaniu nowej palety używaj tej samej konwencji.
 */

/* ----- DESIGN TOKENS — tło strony -----
 * Wspólne tło wszystkich trzech kroków funnel'a (step1/2/3). Wcześniej każdy
 * plik miał własny `--bg-main: #FFFCF1` w lokalnym :root — trzy osobne
 * deklaracje tej samej intencji. Tu jedna definicja = jedno źródło prawdy.
 * Ciepły krem: białe karty/panele lekko „wychodzą" do przodu bez cieni dzięki
 * różnicy względem tła. Wartość przeniesiona 2026-08-28 do `--papier` w palecie
 * serwisu niżej (#FFF7E8 → #FBF6ED, ten sam krem o mniejszym nasyceniu żółci);
 * `--kadr-bg` zostaje jako nazwa, którą znają istniejące reguły.
 */
:root {
    --kadr-bg: var(--papier);
}

/* ============================================================================
 * PALETA SERWISU (2026-08-28, decyzja Zeldy) — JEDNO ŹRÓDŁO PRAWDY
 * ============================================================================
 * Nazwy polskie i celowo NIE zmieniane na angielskie: to jest paleta podana
 * przez właścicielkę produktu i ma być rozpoznawalna w tej postaci, w której
 * została ustalona. Tłumaczenie nazw znaczyłoby, że przy następnej korekcie
 * trzeba by mapować „jej" kolory na „nasze" — czyli wprowadzić słownik,
 * którego rozjazd jest tylko kwestią czasu.
 *
 * ŻYJE W tokens.css, NIE w kadr_step3.css: ten plik ładują step1, step2
 * i step3, więc paleta obowiązuje w całym lejku od jednej deklaracji. Wcześniej
 * step1 i step2 miały WŁASNE kopie tokenów zieleni w inline'owym <style>
 * i zmiana koloru wymagała trafienia w trzy miejsca — dokładnie ten rozjazd
 * zobaczyłby klient przechodzący z checkoutu do panelu.
 *
 * SKALA ZIELENI jest czterostopniowa (900 / 800 / 700 / 500) i każdy stopień
 * ma JEDNĄ rolę. Mieszanie ich („ciemniejsza zieleń, bo ładniej wygląda")
 * kasuje informację, którą kolor niesie — a przy demografii 50+ kolor jest
 * szybszym nośnikiem stanu niż tekst.
 *
 * 2026-08-28: `--zielen-700` przejęła rolę koloru marki po #1E5336
 * (`--color-main-green`). Wcześniej te dwie wartości żyły obok siebie —
 * ramka zaznaczenia była miętowa, a przycisk pod nią wciąż w starej,
 * oliwkowej zieleni. Dziś to JEDNA wartość; `--color-main-green` jest
 * aliasem `--zielen-700`, nie osobnym kolorem.
 * ========================================================================= */
:root {
    --zielen-900: #0F3A2D;    /* tekst zielony, kwoty */
    --zielen-800: #134636;    /* hover wypełnionego przycisku primary */
    --zielen-700: #17513F;    /* kolor marki: zaznaczenia, przycisk */
    --zielen-500: #2E7C5F;    /* hover ramki, stany aktywne na jasnym tle */

    /* Kanały RGB `--zielen-700` bez `#`, do składania półprzezroczystych
     * warstw: `rgb(var(--zielen-700-rgb) / 0.12)`. Zapis ze spacjami i
     * ukośnikiem jest wymagany — `rgba()` NIE przyjmuje jednej zmiennej
     * w miejscu trzech kanałów, więc bez tego tokenu każdy cień, focus-ring
     * i podświetlenie wiersza musiałby trzymać własną kopię `30, 83, 54`.
     * Tak było do 2026-08-28: 34 kopie brand-zieleni w ośmiu plikach, żadna
     * nie widziała podmiany koloru marki. */
    --zielen-700-rgb: 23 81 63;

    --plakietka-tlo: #E2EFE8; /* plakietki „oszczędzasz" */
    --wybor-tlo: #F1F8F4;     /* tło zaznaczonej karty i dodatku */
    --ikona-tlo: #A8CFBC;     /* krążki pod ikonami stylów */

    --papier: #FBF6ED;        /* ciepłe tło ekranu */
    --papier-cien: #F6EFE2;   /* tło podsumowania */
    --karta: #FFFFFF;

    --mosiadz-600: #8F6019;   /* plakietka „Najczęstszy wybór", rabat */
    --mosiadz-100: #F6E9CE;

    --linia: #E8E0D1;         /* ciepła linia włosowa */
    --linia-mocna: #D9CEB9;

    --tekst: #26302B;
    --tekst-mut: #6B7469;
}

/* ============================================================================
 * STANY WYBORU — wspólny słownik dla wszystkich pickerów lejka i panelu
 * ============================================================================
 * Trzy stopnie TEJ SAMEJ rodziny: neutralny wiersz → wiersz pod kursorem →
 * wiersz zaznaczony. Czytają je wiersze cennika i kafelki dodatków
 * (css/purchase-picker.css — komponent WSPÓLNY dla checkoutu i panelu),
 * wiersze listy zamówień oraz pickery stylów.
 *
 * PRZENIESIONE TUTAJ Z `:root` W kadr_step3.css (2026-08-28), bo od chwili,
 * gdy ten sam komponent cennika renderuje się w step2 i w step3, tokeny
 * zadeklarowane w arkuszu panelu byłyby dostępne tylko na jednym z dwóch
 * ekranów — a checkout dostałby ramkę zaznaczenia z fallbacku, czyli żadną.
 * Ta sama zasada, co przy palecie serwisu wyżej: token współdzielony przez
 * dwa pliki mieszka w tokens.css, nie w jednym z nich.
 *
 * `--variant-hover-border` to stopień POŚREDNI: element pod myszą zapowiada
 * kolor zaznaczenia zamiast tylko ciemnieć na szaro. Kontrast wobec bieli
 * 5,04:1, wobec `--variant-selected-bg` 4,68:1 — powyżej progu 3:1 dla
 * elementów nietekstowych (WCAG 1.4.11).
 * ========================================================================= */
:root {
    --variant-selected-bg: var(--wybor-tlo);
    --variant-selected-border: var(--zielen-700);
    --variant-hover-border: var(--zielen-500);
}

/* ============================================================================
 * ALIASY BRANDOWE — nazwy, które zna reszta serwisu
 * ============================================================================
 * Do 2026-08-28 brand-zieleń była zadeklarowana LITERAŁEM w czterech
 * niezależnych `:root` (css/style.css dla landingu i stron treściowych,
 * inline <style> w kadr_step1.html, inline <style> w kadr_step2.html,
 * css/kadr_step3.css dla panelu) plus w css/chat.css, css/admin/analytics.css
 * i w `--kadr-tile-accent` niżej w TYM pliku. Osiem kopii tej samej decyzji:
 * podmiana koloru marki wymagała trafienia w każdą z nich, a pominięcie
 * jednej dawało klientowi zmianę barwy w połowie zakupu.
 *
 * Teraz literał żyje wyłącznie w palecie wyżej, a te aliasy są jedynym
 * pomostem do nazw używanych w regułach. Pliki, które je czytają, NIE mają
 * już własnych deklaracji — dlatego `tokens.css` MUSI być podlinkowany na
 * każdej stronie serwisu (dodane 2026-08-28 do index/404/kontakt/opinie/
 * polityka-prywatnosci/regulamin i do szablonu admin_analytics.html).
 *
 * Fallbacków `var(--color-main-green, #1E5336)` też już nie ma: fallback to
 * kopia wartości, czyli dokładnie ten problem, który ten blok likwiduje.
 * Jeśli token nie dojdzie, ma być widać awarię, a nie stary kolor.
 * ========================================================================= */
:root {
    --color-main-green: var(--zielen-700);
    --color-main-green-rgb: var(--zielen-700-rgb);
    --btn-primary-bg: var(--zielen-700);
    --btn-primary-hover-bg: var(--zielen-800);
    --btn-primary-text: #FFFFFF;
    --text-link-hover: var(--zielen-700);
}

/* ============================================================================
 * OCENY — gwiazdki, rozkład, plakietki (2026-08-30)
 * ============================================================================
 * Osobna rodzina od brand-zieleni, bo to NIE jest ten sam kolor i nie ma się
 * za nim ciągnąć: `--color-main-green` steruje przyciskami i CTA, ocena jest
 * warstwą informacyjną. Wcześniej odcień oceny (#2E7D46) siedział literałem
 * w `.op-scope` w review-card.css, a tło pasków (#EEEDE9) i pustych gwiazdek
 * (#E7EBE3) były trzema różnymi hexami w dwóch plikach — mimo że opisują tę
 * samą rzecz: „pustą część oceny".
 *
 * MUSI być w tokens.css, nie w review-card.css: gwiazdki renderuje także
 * landing (css/stars.css bez `.op-scope`) i checkout, więc definicja przy
 * jednym komponencie zostawiała pozostałe dwa na fallbackach — czyli na
 * kopiach wartości, które przy zmianie palety zostają w tyle.
 * ========================================================================= */
:root {
    /* Kolor ocen — gwiazdki, paski rozkładu, ikona zweryfikowanego zakupu */
    --color-rating: #2D6A4F;
    /* Tło pustej części paska i pustych gwiazdek */
    --color-rating-track: #E6E4DA;
    /* Tint pod odznakę „% opinii pozytywnych" */
    --color-rating-tint: #E8F0EB;
}

/* ----- DOBÓR `--zielen-800` (hover przycisku, 2026-08-28) -----
 * Serwis miał DWA hovery dla jednej brand-zieleni: #1A4930 w lejku
 * (step1/step2/step3) i #164428 na landingu oraz w opiniach. Ten sam
 * przycisk zachowywał się inaczej w zależności od tego, na której stronie
 * klient go dotknął. Zwinięte do jednego tokenu.
 *
 * Wartość NIE jest dobrana na oko — to środek istniejącej skali między
 * `--zielen-900` (H 161.9°, S 58.9%, L 14.3%) a `--zielen-700` (H 161.4°,
 * S 55.8%, L 20.4%), czyli H 161.6° / S 57.3% / L 17.4% → #134636. Skala
 * zostaje równomierna, a hover jest krokiem tej samej rodziny, nie czwartym
 * odcieniem dobranym obok niej.
 *
 * KROK JASNOŚCI (WCAG 2.1 / sRGB, policzony):
 *   #17513F → #134636   Δ luminancji 16.4e-3
 *   dla porównania stara para lejka #1E5336 → #1A4930 dawała 15.3e-3,
 *   a landingowa #1E5336 → #164428 aż 22.7e-3. Nowa wartość leży między
 *   nimi, bliżej lejka — czyli miejsca, w którym klient klika przycisk
 *   płatności i gdzie zmiana zachowania byłaby najbardziej ryzykowna.
 *
 * KONTRAST BIAŁEGO NAPISU:
 *   na --zielen-700  9.19:1   (spoczynek)
 *   na --zielen-800 10.73:1   (hover)
 * Oba AAA. Przy demografii 50+ hover nie może być JEDYNYM sygnałem stanu,
 * ale skoro jest — musi być widoczny bez wpatrywania się w ekran.
 *
 * DLACZEGO CIEMNIEJ, A NIE JAŚNIEJ: `--zielen-500` jest opisana jako
 * „hover, stany aktywne" i tak działa — ale jako RAMKA i tło na jasnych
 * powierzchniach, gdzie ma 5.04:1 na `--karta`. Jako wypełnienie przycisku
 * z białym napisem dałaby 5.04:1, czyli AA zamiast AAA, i odwróciłaby
 * kierunek hovera względem tego, co serwis robi dzisiaj wszędzie indziej.
 * Zmiana kierunku to osobna decyzja projektowa, nie skutek uboczny podmiany
 * koloru — `--zielen-500` zostaje przy swojej dotychczasowej roli.
 */

/* ----- DOBÓR `--ikona-tlo` (2026-08-28) -----
 * Zastąpił limonkowe #C0DD97 — ostatni odcień starej rodziny oliwkowej,
 * widoczny jako krążek pod ikoną stylu renowacji w pickerach (step1, step2,
 * panel) i jako miękka ramka wiersza „Masz więcej zdjęć?".
 *
 * WYMÓG BYŁ DWUSTRONNY, stąd wybór policzony, a nie dobrany na oko:
 *   • krążek MUSI odcinać się od `--wybor-tlo`, bo na zaznaczonym wierszu leży
 *     wprost na nim. Limonka odcinała się ODCIENIEM (żółć vs zieleń); mięta
 *     tego kontrastu nie ma, więc musi odciąć się JASNOŚCIĄ — inaczej dwa
 *     miętowe pola stykają się bez granicy i krążek znika.
 *   • krążek NIE MOŻE być ciemniejszy, niż potrzeba, bo leży pod nim glif
 *     w `--zielen-700` (`--picker-icon-filter` / `background-color` w maskach).
 *
 * ROZWAŻANE (kontrast do bieli / do --wybor-tlo / glif --zielen-700 na krążku):
 *   #B6DBD0   1.50 / 1.39 / 6.14   — mięta o DOKŁADNIE tej samej luminancji,
 *                                    co stara limonka (Δ 0.00008). Zachowuje
 *                                    wagę wizualną 1:1, ale odsunięcie od
 *                                    --wybor-tlo zostaje takie jak było.
 *   #A8CFBC   1.71 / 1.58 / 5.39   ← WYBRANE
 *   #CBE5D9   1.33 / 1.24 / 6.89   — za blisko --wybor-tlo, krążek się zlewa.
 *
 * Wybrane #A8CFBC: o stopień ciemniejsze od odpowiednika limonki 1:1, bo
 * granica między krążkiem a tłem musi teraz nieść całą różnicę sama. Glif
 * zachowuje 5.39:1, czyli powyżej AA dla tekstu — a jest grafiką, więc
 * obowiązuje go łagodniejszy próg 3:1.
 */

/* ----- AUDYT KONTRASTU PALETY (2026-08-28) -----
 * Policzony, nie oszacowany — WCAG 2.1, sRGB. Zapisany tutaj, przy wartościach,
 * bo to jedyne miejsce, w którym następna korekta koloru go zobaczy.
 *
 * PRZECHODZĄ z zapasem (AA dla tekstu, ≥4.5:1):
 *   --zielen-900 na --karta 12.62 · na --wybor-tlo 11.71 · na --plakietka-tlo
 *   10.67 · na --papier-cien 11.04   (kwoty, sumy, plakietki)
 *   --zielen-700 na --karta 9.19 · na --wybor-tlo 8.52 · na --papier 8.54
     (kolor marki: przyciski, ikony dodatków, ramki zaznaczenia)
 *   --zielen-800 na --karta 10.73 · na --papier 9.97   (hover przycisku)
 *   --tekst na --karta 13.64 · --tekst-mut na --karta 4.85
 *   --zielen-500 na --karta 5.04 (ramka hover, próg UI 3:1)
 *
 * `--tekst-mut` MA SWÓJ ZASIĘG i on jest wąski: 4.85:1 na --karta, 4.50:1 na
 * --wybor-tlo — czyli działa na jasnych powierzchniach kart, i tylko tam.
 * Na --papier-cien schodzi do 4.24:1, więc pozycje koszyka używają pełnego
 * `--tekst` (11.92:1). Reguła praktyczna przy dokładaniu nowych ekranów:
 * stłumiony szary na ciepłym beżu nie ma dość miejsca między sobą a tłem,
 * żeby być jednocześnie cichszy i czytelny. Hierarchię niesie tam rozmiar
 * i grubość, nie wygaszenie koloru.
 *
 * BURSZTYN PRZECHODZI AA OD 2026-08-28 (decyzja Zeldy): #A9721E → #8F6019.
 * Ten sam odcień, niższa jasność — hue i nasycenie bez zmian, więc plakietka
 * dalej czyta się jako „naturalny drugi kolor", a nie jako ostrzeżenie:
 *   --karta na --mosiadz-600       5.45:1  (biały tekst plakietki; było 4.11)
 *   --mosiadz-600 na --papier-cien 4.76:1  (wiersz „Rabat za N zdjęć"; było 3.59)
 *   --mosiadz-600 na --karta       5.45:1
 *   --mosiadz-600 na --papier      5.06:1
 * Wszystkie cztery ≥4.5:1, czyli AA dla tekstu dowolnego rozmiaru. Przy
 * demografii 50+ i powiększeniach to nie jest formalność — plakietka i kwota
 * rabatu to jedyne dwa miejsca w dokupie, gdzie liczba jest w innym kolorze
 * niż reszta wiersza, więc muszą być czytelne bez przybliżania ekranu.
 *
 * UWAGA DLA NASTĘPNEJ KOREKTY: wcześniejsza wersja tego audytu zapowiadała dla
 * #8F6019 wartości 4.63:1 i 4.90:1 — obie były BŁĘDNE (rzeczywiste: 4.76 i
 * 5.45). Liczby powyżej są policzone WCAG 2.1 / sRGB i odtwarzają co do setnej
 * zweryfikowane kotwice starego odcienia (3.59 i 4.11), więc formuła się zgadza.
 * Kontrastu nie szacuj na oko ani przez interpolację — policz.
 *
 * OSOBNY PRZYPADEK — obwódka pustego znacznika wyboru:
 *   --linia-mocna na --karta 1.56:1. To jest PONIŻEJ progu 3:1 dla elementów
 *   interfejsu (WCAG 1.4.11) i dotyczy kółka, po którym klient poznaje, że
 *   wiersz cennika DA SIĘ wybrać. Zaznaczony stan jest czytelny (wypełnienie
 *   --zielen-700, 9.19:1), niezaznaczony — ledwie widoczny na białej karcie.
 *   Nie podniosłem tego samodzielnie, bo `--linia-mocna` rysuje też ramki
 *   kart i podkreślenia w koszyku, gdzie delikatność jest zamierzona.
 *   Rozwiązanie bez ruszania palety: dać SAMYM znacznikom własny, ciemniejszy
 *   obrys (np. --tekst-mut), zostawiając linie włosowe bez zmian.
 */

/* ----- DESIGN TOKENS — referral palette -----
 * Amber accent dla całego funnel'a polecania:
 *   - step1: `.referral-info-banner` (banner "Zostałeś polecony")
 *   - step3: `.ref-card`, `.ref-panel`, `.ref-reward-row` (panel polecania)
 *
 * Ta sama paleta obsługuje też pasek „niedokończone zamówienie" w step1
 * (`.persistent-cart-banner`) — to ten sam bursztyn (powiadomienie „w toku"),
 * świadomie reużyty zamiast tworzenia drugiego zestawu wartości.
 *
 * Paleta jasny amber (#FFF4D9) na bg, dark amber (#6B4A0A) na text — wysoki
 * kontrast (WCAG AA dla text >18px, AAA dla text >24px). Border #E8C77F
 * subtelny, hover #C18A1E ciemniejszy o ~30% (visible click affordance).
 */
:root {
    --kadr-referral-card-bg: #FFF4D9;
    --kadr-referral-card-border: #E8C77F;
    --kadr-referral-card-border-hover: #C18A1E;
    --kadr-referral-icon-bg: #FCE4A6;
    --kadr-referral-text-strong: #6B4A0A;
    --kadr-referral-text-muted: #8B6914;
    --kadr-referral-cta-bg: #6B4A0A;
    --kadr-referral-cta-bg-hover: #5A3D08;
}

/* ----- DESIGN TOKENS — reno style picker -----
 * Tokens używane przez css/reno-style-picker.css (shared component dla
 * kafelków stylu renowacji w step1 .upload-card + step3 mobile picker).
 *   --kadr-pick-icon: kolor glyphu ikony w spoczynku (przytłumiona zieleń
 *     — mniej kontrastowa niż --color-main-green, żeby nie konkurować
 *     z ciemnozielonym akcentem .active). 2026-08-28 przestrojony
 *     #5A7A5E → #5A7A70: nasycenie i jasność BEZ ZMIAN (S 15.1%, L 41.6%),
 *     zmieniony wyłącznie odcień 127.5° → 161.4°, czyli na odcień nowej
 *     marki. Stara wartość była ostatnim oliwkowym akcentem w pickerze
 *     i po podmianie leżałaby wprost obok miętowego glyphu .active jako
 *     widoczny rozjazd rodziny. Kontrast na --karta 4.72:1 (było 4.79:1)
 *     — glyph to grafika, próg WCAG 3:1, więc zapas zostaje duży.
 *   --kadr-row-hover: tło wiersza opcji na hover (kremowy, dopasowany
 *     do --kadr-bg tła strony — daje subtelny shift bez "outsidera"
 *     na kremowym layoutcie)
 */
:root {
    --kadr-pick-icon: #5A7A70;
    --kadr-row-hover: #F5F1DE;
}

/* ----- DESIGN TOKENS — kafelki boczne / top-nav step3 (LAYOUT V3) -----
 * PLAN_STEP3_LAYOUT_V3: kafelki nawigacyjno-upsellowe lewej kolumny desktopu
 * (Część A) i segmenty mobilnego top-nav (Część B — reuse tych samych
 * tokenów, nie duplikować palety).
 *
 * Kafelki: białe tło + kolorowy pasek akcentowy 4px z lewej (decyzja z sesji
 * mockupowej — pełne wypełnienia robiły z kolumny choinkę i osłabiały
 * fioletowy upsell w playerze). Kolor niosą: pasek, ikona, tytuł.
 *
 * REWIZJA 2026-08 (sesja mockupowa v4/v5): cztery osobne akcenty
 * (--kadr-tile-accent-order/gallery/addon/referral — zieleń/niebieski/
 * bursztyn/fiolet) zwinięte do DWÓCH tokenów. Powód: cztery kolory w jednej
 * kolumnie znosiły się nawzajem — nic nie było wyróżnione, a bursztynowy
 * upsell nie wygrywał uwagi mimo że jako jedyny generuje przychód. Teraz:
 *
 *   --kadr-tile-accent            → nawigacja (zamówienie / wgrane / poleć nas)
 *   --kadr-tile-accent-highlight  → WYŁĄCZNIE dokup zdjęć (jedyny bursztyn
 *                                   w panelu = jednoznaczny sygnał "tu
 *                                   wydajesz pieniądze")
 *
 * --kadr-tile-accent czyta dziś `var(--zielen-700)` — jedną prawdę dla
 * brand-zieleni. Wcześniejsza wersja tego komentarza twierdziła, że var()
 * jest tu niemożliwe, bo tokens.css ładuje się PRZED kadr_step3.css. To było
 * BŁĘDNE: custom properties rozwiązują się przy liczeniu wartości, już po
 * całej kaskadzie, więc kolejność deklaracji na tym samym `:root` nie ma
 * znaczenia — dowodzi tego `--kadr-bg: var(--papier)` na górze tego pliku,
 * odwołujące się do zmiennej zdefiniowanej niżej i działające od zawsze.
 * Ta pomyłka kosztowała drugą kopię brand-zieleni w projekcie.
 *
 * --kadr-tile-accent-tint wskazuje na `--wybor-tlo` zamiast trzymać własne
 * #EAF0EC. Oba opisywały tę samą powierzchnię („jasna zieleń pod zaznaczoną
 * treścią"), tyle że tint pochodził jeszcze z rodziny starej zieleni — po
 * podmianie marki różnica odcienia stałaby się widoczna obok siebie.
 *
 * Tinty (*-tint) niosą WYŁĄCZNIE stan aktywny kafelka. Przy jednolitej
 * kolorystyce sama ramka 1px przestała wystarczać jako sygnał "tu jestem"
 * (przy czterech kolorach robiła to różnica barw) — delikatne tło domyka
 * odczyt dla grupy 50+. Świadomie NIE ma tinta "stałego" (kafelek dokupu
 * na spoczynku ma białe tło jak reszta) — akcent niesie sam kolor paska,
 * ikony i tytułu.
 */
:root {
    --kadr-tile-bg: #FFFFFF;
    --kadr-tile-border: #e7e5e4;                  /* = --color-stone-200 */
    --kadr-tile-accent: var(--zielen-700);        /* = --color-main-green */
    --kadr-tile-accent-tint: var(--wybor-tlo);    /* tło kafelka aktywnego */
    --kadr-tile-accent-highlight: #BA7517;        /* bursztyn — tylko dokup */
    --kadr-tile-accent-highlight-tint: #FDF3E2;   /* tło kafelka dokupu aktywnego */
}