/* 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 #FFF7E8: białe karty/panele lekko „wychodzą" do przodu bez
 * cieni dzięki różnicy względem tła.
 */
:root {
    --kadr-bg: #FFF7E8;
}

/* ----- 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)
 *   --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: #5A7A5E;
    --kadr-row-hover: #F5F1DE;
}