/* ===========================================================================
tokens.css — jediný zdroj pravdy pro vzhled všech webů ladislavzizek.cz
---------------------------------------------------------------------------
Vznikl 25. 10. 2026 z auditů design-audit-2026-10-25.md
a design-audit-vse-2026-10-25.md (352 barev, 21 zaoblení, 7 písem).
PRAVIDLO: do stránek se nepíšou hodnoty, píšou se proměnné.
Když je potřeba nový odstín, přidá se SEM, ne do stránky.
Do každé stránky patří tahle dvojice (fonty se nelinkují odsud,
@import by zdržel vykreslení):
Fonty jsou hostované na vlastním serveru, ne z Google — návštěvník se
nikam ven nepřipojuje a je to rychlejší. Literata i Public Sans jsou
variabilní: čtyři soubory, 208 kB celkem, latin i latin-ext (bez
latin-ext by se nevykreslilo ě š č ř ž ů ť ď ň).
Soubory a fonts.css vyrábí /root/fonty.sh na serveru.
=========================================================================== */
:root {
/* --- BARVY -------------------------------------------------------------
Zlatá je značka. Je ale světlá (kontrast 2,7:1 na bílé), takže jako
TEXT nikdy neprojde — na text a odkazy je --zlata-text (5,8:1).
Měřeno podle WCAG 2.1, práh AA pro běžný text je 4,5:1. */
--zlata: #B89968; /* plochy, ikony, podtržení, dekorace */
--zlata-text: #7A6239; /* odkazy a text ve zlaté — jen tahle */
--zlata-svetla: #EFE6D4; /* jemné podbarvení, zvýrazněný blok */
--inkoust: #111111; /* nadpisy */
--text: #44474C; /* běžný text */
--text-slaby: #5F6368; /* popisky, metadata — projde i na ploše */
--papir: #FFFFFF; /* pozadí stránky */
--plocha: #F4F4F2; /* karty, sekce, vstupy — neutrální, bez
žlutého nádechu staré #F7F2E9 */
--linka: #E3E3E0; /* oddělovače, rámečky */
/* stavové — pro formuláře a kalkulačky */
--ok: #2F6F4F;
--pozor: #8A5A00;
--chyba: #A32D2D;
/* --- PÍSMO -------------------------------------------------------------
Literata je kreslená pro čtení na obrazovce, Public Sans je neutrální
grotesk s dobrými tabulkovými číslicemi (kalkulačky, částky). */
--pismo-nadpis: 'Literata', Georgia, 'Times New Roman', serif;
--pismo-text: 'Public Sans', system-ui, -apple-system, sans-serif;
/* velikosti — fluidní, ať se neřeší breakpointy */
--v-hero: clamp(34px, 5.2vw, 58px);
--v-sekce: clamp(26px, 3.2vw, 36px);
--v-blok: clamp(19px, 2vw, 22px);
--v-text: 17px;
--v-maly: 15px;
--v-drobny: 13px;
--rad-tesny: 1.15; /* nadpisy */
--rad-text: 1.62; /* odstavce */
/* --- ZAOBLENÍ ----------------------------------------------------------
Tři hodnoty, ne dvacet jedna. Když se nějaký prvek nevejde do žádné
z nich, je to signál, že se liší zbytečně. */
--r-plocha: 16px; /* karty, sekce, obrázky */
--r-prvek: 8px; /* tlačítka, vstupy, štítky */
--r-pill: 999px; /* kulaté odznaky a přepínače */
/* --- STÍNY -------------------------------------------------------------
Dvě. Nízký = prvek leží na stránce, vysoký = plave nad ní
(rozbalovací nabídka, dialog). Nic mezi tím. */
--stin-nizky: 0 1px 2px rgba(17,17,17,.06), 0 2px 8px rgba(17,17,17,.05);
--stin-vysoky: 0 4px 12px rgba(17,17,17,.10), 0 12px 32px rgba(17,17,17,.10);
/* --- MEZERY ------------------------------------------------------------
Násobky čtyřky. Svislé odsazení sekcí je --m-sekce. */
--m-1: 4px; --m-2: 8px; --m-3: 12px; --m-4: 16px;
--m-5: 24px; --m-6: 32px; --m-7: 48px; --m-8: 64px; --m-9: 96px;
--m-sekce: clamp(56px, 8vw, 96px);
--sirka-max: 1120px; /* obsahový sloupec */
--sirka-text: 68ch; /* řádek textu ke čtení */
/* --- POHYB -------------------------------------------------------------
Jen tam, kde reaguje na dotek uživatele. Žádné vyjíždění sekcí
při scrollování — to je nejčastější znak generované stránky. */
--prechod: 160ms cubic-bezier(.2, 0, .2, 1);
}
/* Kdo má vypnuté animace, ať je nedostane. */
@media (prefers-reduced-motion: reduce) {
:root { --prechod: 0ms; }
}