/* ============================================================
   tokens.css — dizajnové premenné + reset
   Jediná zodpovednosť: definovať vizuálny „slovník" widgetu.
   Žiadne komponenty, žiadny layout.

   Smerovanie „Kosť Espresso": kostená plocha s teplým prechodom,
   takmer čierne tlačidlá, zlatý akcent na drobnostiach.
   ============================================================ */

:root{
  /* ---------- plochy ---------- */
  /* Podklad widgetu. Nie plochá farba — telo dostáva jemný teplý prechod
     (pozri body nižšie); --bone je jeho stredný tón a zároveň záloha. */
  --bone:#faf6ee;
  /* Všetko, čo má ležať „nad" plátnom: karty, voľby, dlaždice, QR box. */
  --surface:#fffdf9;

  /* Priesvitné varianty plochy — pod nimi presvitá fotografia.
     --surface-thin (78 %) je pre voľby: nesú len popis v hlavnom atramente,
     ktorý má aj nad najtmavším bodom fotografie 10,51:1.
     --surface-panel (92 %) je pre všetko, čo nesie aj druhotný text —
     karty, tipy k fotke, text súhlasu. Ten by pri 78 % spadol na 3,68:1. */
  --surface-thin:rgba(255,253,249,.78);
  --surface-panel:rgba(255,253,249,.92);

  /* Reakcia na kurzor. Stmavenie ide cez výplň, nie cez obrys — ten si tak
     drží jednotnú svetlú hodnotu vo všetkých stavoch. Hlavný atrament má na
     nich 14,38:1 (prejdenie) a 12,91:1 (kliknutie). */
  --surface-hover:rgba(243,234,214,.88);
  --surface-active:rgba(233,221,196,.94);

  /* ---------- písmo v ploche ---------- */
  --ink:#211a12;        /* 15,95:1 na ploche */
  --ink-soft:#6e6151;   /* 5,58:1 na ploche, 5,92:1 na karte */

  /* ---------- linky ---------- */
  /* Dekoratívne: rámik karty, QR boxu, dráha priebehu. Nič neohraničujú. */
  --line:#e5daca;
  /* Hranica interaktívneho prvku (voľba, jej značka, dlaždica, tlačidlo späť).
     WCAG 1.4.11 na ne žiada 3:1; --line má voči ploche 1,2:1, takže na obrys
     zaškrtávacieho políčka nestačí. --line-strong má 3,83:1. */
  --line-strong:#8a7b62;

  /* ---------- akcia ---------- */
  /* Primárne tlačidlo a číslované krúžky. Voči ploche 14,78:1 — je to
     najvýraznejší prvok na obrazovke, preto smie byť na jednom kroku
     práve jeden. Tlačidlo späť je preto len obrys. */
  --espresso:#2a2018;
  --on-espresso:#faf6ee;
  /* Tmavé tlačidlo sa pod kurzorom nadvihne a pri stlačení zapadne. Stmaviť
     ho pri prejdení nejde — je už takmer čierne a zmenu by nebolo vidieť.
     Krémový nápis má na oboch 12,34:1, resp. 16,78:1. */
  --espresso-lift:#3a2d22;
  --espresso-press:#1b1510;

  /* ---------- zlato ---------- */
  /* Rovnaké pravidlo ako inde v palete: svetlejší tón je plocha, tmavší písmo.
     --gold má na kréme 3,32:1 — dosť na grafiku (hviezdička, prstenec voľby,
     výplň priebehu), málo na text. Čokoľvek so slovami berie --gold-ink:
     5,32:1 na karte, 5,01:1 na ploche, 4,52:1 na --wash. */
  --gold:#a9812f;
  --gold-ink:#856526;
  /* Zlaté písmo na stmavenej výplni (--surface-active), kde --gold-ink
     spadne na 4,08:1. Tento tón tam má 6,71:1. */
  --gold-deep:#5e4618;
  /* Podklad vybranej voľby, ikonových krúžkov a zástupného obrázka produktu. */
  --wash:#f4ead6;
  /* Podklad fotky produktu. Packshoty z e-shopu sú väčšinou JPEG na čisto
     bielom, niektoré však PNG s priehľadným okolím — pod tie musí ísť tá istá
     biela, inak by sa ich karta farbou líšila od ostatných. */
  --packshot:#fff;

  /* ---------- hodnotenie hviezdičkami ---------- */
  --star:#a9812f;
  --star-off:#ddd0b8;

  /* ---------- stavové farby ---------- */
  /* --success ostáva sýto zelená: kreslí sa nad tmavým obrazom z kamery
     (obrys tváre, bodka splnenej podmienky), nie na kostenej ploche. */
  --success:#34d399;
  /* Zelený text nesie --ok-ink: 5,26:1 na odznaku zhody aj na štítku
     podmienky, 5,75:1 na ploche. */
  --ok-ink:#3d6b45;
  --ok-bg:#e6efe4;
  --ok-line:#bcd4bd;

  --warn-bg:#f7eed6;
  --warn-line:#e0cf9f;
  --warn-ink:#7a5c14;   /* 5,39:1 */

  --error-bg:#f7e7e0;
  --error-line:#e3bfb2;
  --error-ink:#8f3a26;  /* 6,23:1 */

  /* ---------- tvary ---------- */
  --radius:16px;
  --radius-sm:12px;
  --radius-btn:14px;
  /* Karty sa vydvihujú obrysom, nie tieňom. Tieň si necháva len to, čo drží
     obraz — náhľad fotky a okno kamery. */
  --shadow:0 1px 2px rgba(33,26,18,.05), 0 10px 28px rgba(33,26,18,.08);

  /* ---------- rozmery ---------- */
  --widget-max-width:480px;
  --gutter:20px;
  /* Spoločný pravý okraj obsahu. Vpravo za ním ostáva pruh fotografie —
     drží kompozíciu a zároveň chráni oko na fotke pred závojom.
     Používa sa ako pravý padding na <main>, pätičke aj priebehu, takže
     voľby, karty aj tlačidlá končia presne na jednej línii.

     16 %, nie 22 %: pri 22 % bol stĺpec textu taký úzky, že úvodný nadpis
     mal štyri riadky a odsek pod ním päť — a krok sa potom roloval. Pri 16 %
     je riadok o ~10 % širší (nadpis má dva riadky) a pruh fotografie je aj
     tak dosť široký na to, aby oko na nej ostalo nezakryté. */
  --inset-right:16%;

  /* ---------- ikonové krúžky ---------- */
  /* Widget kreslí ikony vždy v krúžku a tie majú naprieč krokmi len tieto
     štyri veľkosti — inak by mal každý krok vlastnú mierku. Tú istú stupnicu
     berie aj značka voľby (--icon-xs), takže krúžok pri otázke a krúžok
     pri pokynoch k fotke spolu ladia. */
  --icon-xs:18px;   /* značka voľby (krúžok / štvorček) */
  --icon-sm:24px;   /* číslo v úvode, symbol pri hesle k fotke */
  --icon-md:34px;   /* obálka pri ponuke rutiny e-mailom */
  --icon-lg:42px;   /* fajka v potvrdení (hodnotenie, odoslaný e-mail) */
  --icon-xl:48px;   /* dlaždica na výber fotky */

  /* ---------- typografia ---------- */
  /* Nadpisy, cena a značka idú kontrastnou antikvou, rozhranie bezpätkovým
     Manrope. Obe sa načítavajú z Google Fonts (odkaz je v index.html);
     záložné rodiny sú vypísané, aby widget nespadol na pätku od hostiteľa. */
  --font-display:"Bodoni Moda","Times New Roman",Georgia,serif;
  --font-ui:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* ---------- pohyb — vypína sa nižšie cez prefers-reduced-motion ---------- */
  --motion-fast:.15s;
  --motion-base:.3s;
}

*{box-sizing:border-box;}

html{
  height:100%;
  background:var(--bone);
}

/* Telo drží len záložnú farbu. Fotografiu aj závoj nad ňou kreslí pevná
   vrstva v layout.css — musí byť samostatný prvok, nie pozadie tela,
   aby sa pri rolovaní nehýbala. */
body{
  margin:0;padding:0;
  min-height:100%;
  background-color:var(--bone);
  color:var(--ink);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}

/* Prístupnosť: zákazníčka so zapnutým „obmedziť pohyb" nemá dostávať
   animácie pri každom prekreslení kroku. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* `hidden` musí vyhrať nad display:flex/grid z tried komponentov —
   inak sa skrytý prvok (napr. QR box) aj tak zobrazí. */
[hidden]{display:none !important;}