/* ============================================================= SPOLEČNÉ DESIGNOVÉ TOKENY Názvy podle docs/13-navod-designovy-system.md — popisují ROLI, ne barvu. Důvod je tam vysvětlený: dnešní `--primary-blue` obsahuje hnědou u pojmů, zelenou u povinností a oranžovou u dokumentace. Produktovou barvu NEPŘEPISOVAT tady, ale v tokens-.css, který se načítá hned za tímto souborem. ROZSAH: zatím jen barvy, tvary a rozměry skořápky. Odstupovou a typografickou stupnici z prototypu (--sp-*, --fs-*) tenhle krok vědomě nepřebírá — produkční hodnoty na čtyřbodové mřížce neleží (18, 22, 28, 44 px) a přepsání by změnilo vzhled všech jedenácti webů bez vizuální revize. Patří to k pilotu, viz kroky 3 až 6 v dokumentu 13. ============================================================= */ :root { /* ---- Značka --------------------------------------------- V kanálech RGB, aby se průhledné varianty daly odvodit zápisem rgb(var(--brand-rgb) / 0.12). Dnes je každá taková varianta samostatná rgba() — v monitoru jich je 772 a při změně odstínu se na ně zapomnělo. */ --brand-rgb: 21 91 181; --brand-dark-rgb: 27 54 93; --white-rgb: 255 255 255; --black-rgb: 0 0 0; --brand: rgb(var(--brand-rgb)); --brand-dark: rgb(var(--brand-dark-rgb)); /* Hover plných tlačítek ZTMAVUJE, nezesvětluje. Dnešní `.btn-primary:hover { background: #2579ed }` shodí kontrast bílého popisku na 4,17 : 1 — tlačítko je tedy čitelné, dokud na něj člověk nenajede myší. Platí na všech jedenácti webech, vznikly kopií téhož souboru. */ --brand-700: #114b94; /* ---- Plochy --------------------------------------------- */ --surface: #ffffff; --surface-2: #f7f9fc; /* vnořená plocha; skořápka ji zatím nemá */ --surface-topbar: #f1f5f9; /* hlavička po odscrollování */ --brand-bg: #eaf2fc; /* světlé podbarvení značkou */ --surface-dark: #0f2744; /* patička a nabídka Řešení */ /* ---- Text na světlé ploše ------------------------------- */ --text: #5a6a7e; /* 5,53 : 1 na bílé */ --text-strong: #1b365d; /* 12,12 : 1 — nadpisy, navigace */ --link: var(--brand); /* pro text obsahu; skořápka má jen navigaci */ /* ---- Text na tmavé ploše -------------------------------- Samostatná sada. Název nese plochu, na kterou patří, takže `--on-dark` na bílém pozadí bije do očí už ve zdrojáku. Není to kosmetika: `--text` a `--text-strong` se dnes používají i v patičce, kde je podklad tmavomodrý. `.footer-copyright` má 2,72 : 1 a `.footer-co-item strong` dokonce 1,24 : 1 — tmavý text na tmavém pozadí. */ --on-dark-link-rgb: 126 184 247; --on-dark: rgb(var(--white-rgb) / 0.92); /* 12,92 : 1 */ --on-dark-muted: rgb(var(--white-rgb) / 0.70); /* 8,05 : 1 */ --on-dark-link: rgb(var(--on-dark-link-rgb)); /* 7,24 : 1 */ --on-dark-link-hover:#a5d0ff; /* 9,37 : 1 */ /* ---- Obrysy a hloubka ----------------------------------- */ --line: #e2ecf8; --line-strong: #d1d9e6; --line-on-dark: rgb(var(--white-rgb) / 0.12); /* Obrys nad patičkou. Ve světlém tématu není potřeba — bílá stránka a tmavá patička se od sebe poznají samy. V tmavém dělá ten rozdíl teprve on. */ --footer-obrys: transparent; --shadow-s: 0 2px 10px rgb(var(--black-rgb) / 0.06); --shadow-m: 0 4px 16px rgb(var(--brand-rgb) / 0.08); --shadow-l: 0 12px 32px rgb(var(--brand-rgb) / 0.16); --shadow-menu: 0 12px 40px rgb(var(--brand-rgb) / 0.14); /* ---- Barvy kategorií v rozcestníku ---------------------- Klíčované názvem kategorie z katalogu, ne pořadím. Dnešní `.sitemap-ext-group--1..4` znamená, že přehození dvou kategorií v katalogu tiše přehodí i barvy. */ --cat-poradenstvi: #0e7490; --cat-zpravodajstvi: #b45309; /* bylo #d97706 = 3,19 : 1 */ --cat-nastroje: #4f46e5; --cat-komplexni: #c81540; /* bylo #e11d48 */ /* ---- Stavy ---------------------------------------------- Barva chyby. Do 7. 10. 2026 v tokenech nebyla, takže první web, který potřeboval označit nevyplněné pole, si vzal `--cat-komplexni` — barvu kategorie z rozcestníku. To je zneužití: kdyby se Komplexní řešení přebarvila, přebarvily by se s nimi chybové hlášky. Odstín je tmavší než `--cat-komplexni`, protože kategorie se měří na 3 : 1 (velký text), zatímco hláška u pole je běžný text a potřebuje 4,5 : 1. */ --chyba: #b3261e; /* 6,53 : 1 na --surface */ /* ---- Typografie ----------------------------------------- */ --font: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif; --lh-body: 1.6; --lh-tight: 1.25; /* ---- Tvar ----------------------------------------------- */ --r-xs: 8px; --r-sm: 12px; --r: 18px; --r-pill: 999px; /* ---- Rozvržení ------------------------------------------ */ --content-max: 1300px; --topbar-h: 78px; --page-pad: 5%; /* ---- Interakce ------------------------------------------ */ --t-fast: 120ms ease; --t-base: 300ms ease; } /* ------------------------------------------------------------- TMAVÉ TÉMA Předefinují se HODNOTY, ne pravidla. Komponenty v base.css a layout-a.css berou barvy výhradně přes `var(--*)`, takže se jich nic z tohohle bloku nedotkne — to je celý smysl tokenů. Tři stavy, ne dva: — výslovná volba světlého `[data-theme="light"]` — výslovná volba tmavého `[data-theme="dark"]` — bez volby podle `prefers-color-scheme` Proto se hodnoty uvádějí dvakrát: v media query se zámkem `:not([data-theme="light"])`, aby výslovná volba světlého přebila nastavení systému, a znovu pod `[data-theme="dark"]`, aby přepínač fungoval i opačným směrem. `--on-dark*` se NEMĚNÍ. Ty tokeny neříkají „tmavé téma", ale „prvek sedí na tmavém podkladu" — patička a nabídka Řešení jsou tmavé v obou tématech. Právě proto bylo dobře je oddělit. ------------------------------------------------------------- */ /* Hodnoty na jednom místě, aby se oba bloky nemohly rozejít. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface: #1b2733; --surface-2: #223040; --surface-topbar: #223040; --brand-bg: #1c2d44; /* Značka se v tmavém tématu zesvětluje. Původní #155bb5 má na tmavé ploše 2,30 : 1, tedy nečitelné. Weby s vlastní paletou si tohle přebíjejí ve svém tokens-.css. */ --brand-rgb: 105 150 208; --brand-700: #81a7d8; /* Patička je TMAVŠÍ než stránka, ne světlejší — zůstává tím, čím je ve světlém tématu: základnou, na které stránka stojí. Rozdíl je ale jen 1,26 : 1, takže sám by splynul; dělá ho teprve obrys níž. */ --surface-dark: #0a1016; --footer-obrys: var(--line-strong); --text: #a8b4c4; --text-strong: #e8eef6; --line: #2a3848; --line-strong: #3b4c61; /* Na tmavém podkladu jsou stíny prakticky nevidět, proto vyšší krycí síla. */ --shadow-s: 0 2px 10px rgb(var(--black-rgb) / 0.35); --shadow-m: 0 4px 16px rgb(var(--black-rgb) / 0.40); --shadow-l: 0 12px 32px rgb(var(--black-rgb) / 0.50); --shadow-menu: 0 12px 40px rgb(var(--black-rgb) / 0.55); --cat-poradenstvi: #4a97ac; --cat-zpravodajstvi: #c57b42; --cat-nastroje: #867fed; --cat-komplexni: #db6783; --chyba: #f2a3a3; /* 7,61 : 1 na --surface */ } } :root[data-theme="dark"] { --surface: #1b2733; --surface-2: #223040; --surface-topbar: #223040; --brand-bg: #1c2d44; --brand-rgb: 105 150 208; --brand-700: #81a7d8; --surface-dark: #0a1016; --footer-obrys: var(--line-strong); --text: #a8b4c4; --text-strong: #e8eef6; --line: #2a3848; --line-strong: #3b4c61; --shadow-s: 0 2px 10px rgb(var(--black-rgb) / 0.35); --shadow-m: 0 4px 16px rgb(var(--black-rgb) / 0.40); --shadow-l: 0 12px 32px rgb(var(--black-rgb) / 0.50); --shadow-menu: 0 12px 40px rgb(var(--black-rgb) / 0.55); --cat-poradenstvi: #4a97ac; --cat-zpravodajstvi: #c57b42; --cat-nastroje: #867fed; --cat-komplexni: #db6783; --chyba: #f2a3a3; /* 7,61 : 1 na --surface */ } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 1ms; --t-base: 1ms; } }