/* ==========================================================================
   Sdílené škály a smlouva mezi motivy a komponentami

   Tady jsou jen hodnoty, které jsou pro všechny motivy stejné. Barvy, písma
   a rádiusy sem nepatří, ty dodává soubor konkrétního motivu.

   Smlouva: komponenty smějí sahat výhradně na proměnné z tohoto seznamu.
   Když v komponentě potřebuješ novou barvu, přidej ji nejdřív sem do soupisu
   a pak ji naplň ve všech theme-*.css. Natvrdo psaný hex v komponentě
   je chyba, rozbije se v ostatních motivech.

   Seznam proměnných, které musí každý motiv naplnit
   -------------------------------------------------
   měřítko     --ui (sdílené, motiv nepřepisuje)
   šířky       --stack-w (sdílené, motiv nepřepisuje)
   písma       --font-display --font-ui --font-num --font-mono --label-font
               --display-weight --display-weight-sm --display-tracking
               --num-weight --board-num-weight
   tvary       --r-sm --r-md --r-lg --r-btn --r-pill --hairline
   plochy      --bg --surface --surface-2 --surface-3 --surface-inset
               --rail-bg (průsvitný podklad lišty, --bg při 72 %; literál,
               ne color-mix: Chromium interpoluje color-mix při přelivu
               motivu v oklab, kdežto plné barvy v sRGB, a lišta by se
               uprostřed přechodu barevně odlepila od pozadí)
   linky       --border --border-strong --grid-line
   text        --text --text-muted --text-faint
   akcent      --accent --accent-hover --accent-ink --accent-soft --accent-ring
               --inverse-ink
   jíl         --clay --clay-hover --clay-ink (výplň hlavní akce, .btn-roll)
   tlačítka    --btn-bg --btn-bg-hover --btn-ink
   vypínač     --toggle-thumb (výplň jezdce, .theme-thumb)
   stavy       --joker --joker-soft --good --warn --bad
   pole        --cell-empty --cell-fill --cell-ink
               --score-bg --score-ink --score-hot-bg --score-hot-ink
   hloubka     --shadow-sm --shadow-md --shadow-lg --overlay
   ozdoba      --focus-offset
   QR          --qr-bg --qr-ink (sdílené, motiv nepřepisuje)
   ========================================================================== */

:root {
  /*
     Zvětšení pro velké displeje. Na běžném monitoru 1; nad 1500 px ho zvedá
     responsive.css. Násobí kořenovou velikost písma (a tím i každou hodnotu
     v rem), rozestupy níž a rozměry ovládání v komponentách.

     Pravidlo pro nový kód: velikost písma piš v rem, rozměry a výplně
     v calc(Npx * var(--ui)). Holé px si nech jen pro vlásečnice, rádiusy
     a jiné detaily, které se zvětšovat nemají.
  */
  --ui: 1;

  /* rozestupy, stejná řada ve všech motivech */
  --sp-1: calc(4px * var(--ui));
  --sp-2: calc(8px * var(--ui));
  --sp-3: calc(12px * var(--ui));
  --sp-4: calc(16px * var(--ui));
  --sp-5: calc(24px * var(--ui));
  --sp-6: calc(32px * var(--ui));
  --sp-7: calc(48px * var(--ui));

  /* časování */
  --t-fast: 120ms ease;
  --t-med: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  /* Pro pohyb, který má být okem vidět celý (jezdec vypínače): --t-med je
     ostrý ease-out a stihne 95 % dráhy za třetinu času, tohle jede rovnoměrně. */
  --t-slide: 240ms ease;

  /* Šířka textového sloupce. Jedna hodnota pro nadpis, perex i rozcestník,
     aby všechno na stránce lícovalo na stejné pravé hraně.

     Schválně v px, ne v `ch`: `ch` je šířka nuly v aktuálním písmu, takže
     stejné číslo dá v každém motivu jinou šířku, serif v Ivory vyjde
     o třetinu užší než grotesk. Sloupec by pak v jednom motivu lícoval
     s rozcestníkem a v druhém končil někde uprostřed. */
  --stack-w: calc(760px * var(--ui));

  /* Podklad a moduly QR kódu. Čtečka potřebuje tmavé moduly na světlém
     podkladu bez ohledu na motiv, tmavý motiv by kontrast obrátil a kód by
     z plátna nešel vyfotit. Proto jsou tyhle dvě barvy sdílené jako --ui,
     ne v theme-*.css; komponenta z nich staví bílou kartu pod kódem. */
  --qr-bg: #fff;
  --qr-ink: #000;

  /* výchozí hodnoty pro proměnné, které většina motivů nepřepisuje */
  --label-font: var(--font-ui);
  --display-weight-sm: var(--display-weight);
  --focus-offset: 2px;
  --btn-bg: var(--accent);
  --btn-bg-hover: var(--accent-hover);
  --btn-ink: var(--accent-ink);
  /* Jezdec vypínače je nejvýš položená plocha lišty: ve světlém motivu stačí
     --surface, bílá se od ivory pozadí sama odrazí. Tmavý motiv si ho zvedá
     výš, jinak jezdec v černé liště zmizí. */
  --toggle-thumb: var(--surface);
}