/* Paleta Kolego — JEDNO místo, kde stojí barvy, písma a základní tvary. Načítá se jako první list na každém povrchu: pult (`server/public/index.html`), konzole (`console/index.html`), přihlášení a druhý faktor obou stran i makety (`vzhled/layout.mjs`). Ostatní listy už tokeny nedeklarují — hledá se tady. Proč to vzniklo (audit maket, nález V2): týž tyrkys #129E9C byl zapsaný pětkrát pod čtyřmi jmény ve třech souborech a šestnáct dalších hodnot dvakrát až pětkrát. Změna značkové barvy tak znamenala pět editací a nic ji nehlídalo. Teď má hodnota jedno jméno a ostatní jména jsou aliasy (`--k-teal: var(--cta)`), takže se paleta nemůže rozejít sama se sebou. SVĚTLO A TMA se nepřepínají `prefers-color-scheme`, ale třídou — tak to dělá pult (◐ ve stavovém řádku) i přihlášení, a tak se to i pamatuje mezi návštěvami: · pult — základ je tmavý, `.ide.light` je světlý modifikátor, · přihlášení — základ je světlý, `.lg.dark` je tmavý modifikátor, · konzole — světlá, tmavý režim nemá (jen tmavé ostrůvky `--k-tma*`). Mechanismus se tímhle souborem nemění; jen se všechny bloky sešly na jedno místo. POŘADÍ BLOKŮ JE SOUČÁST VÝZNAMU: uvnitř téže specificity vyhrává poslední. Bloky proto stojí v pořadí, ve kterém stály ve svých původních souborech (`style.css` → `style-kolego.css` → `console.css` → `login.css`). */ /* ================================================================ kostra (dřív style.css) — grafitový základ, který skin přebíjí ================================================================ */ :root { --ink: #17181c; /* podklad */ --panel: #212329; /* karta */ --sunk: #1c1e23; /* zapuštěná plocha */ --edge: rgba(245, 242, 238, .13); --edge-hard: rgba(245, 242, 238, .26); --edge-soft: rgba(245, 242, 238, .05); /* mřížka v pozadí */ --tx: #f5f2ee; --dim: #a7a49d; --faint: #7d7b75; --acc: #ff5a1f; /* jediný akcent */ /* Text NA akcentní ploše. V grafitové paletě je akcent svítivá oranžová a nejlíp se na ní čte podklad; skin Kolego má místo ní cihlovou, na které značka píše bíle (logomanuál) — proto token, a ne natvrdo `--ink` na dvaceti místech (K-196). */ --na-acc: var(--ink); --acc-soft: rgba(255, 90, 31, .12); --acc-line: rgba(255, 90, 31, .4); --data: #0B5C9E; /* grafy — akcent na ně je moc, viz skin */ --data-soft: rgba(11, 92, 158, .13); --deep: #0f3d30; --ok: #4fb87a; --warn: #e8a33d; /* Role a režim člověka (odznak v menu u profilu). Cihlový rám tam četl jako varování, i když nehlásí nic špatného — je to holý fakt o účtu. Fialová je jediná barva palety, která nenese žádný jiný význam (znacka = cihlová, akce = tyrkys, data = sonar, stavy = zelená/jantar/červená), takže se odznak nepřilepí k žádnému stavu (docs/03, 12. 9. 2026). */ --role: #9B7BE8; --role-line: rgba(155, 123, 232, .42); /* Terminál je vždycky tmavý, papír vždycky světlý — ani jedno se nepřevrací. */ --term: #0d0e11; --term-tx: #ece8e2; --term-dim: #928f88; --term-line: rgba(245, 242, 238, .14); --paper: #f5f3ef; --paper-2: #e7e4de; --paper-tx: var(--ink); --paper-dim: #5d5b55; --paper-line:rgba(23, 24, 28, .16); --paper-acc: #c23f10; --disp: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --jp: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; --r: 4px; /* ---------- škála tvarů ---------- Rádius měl v repu čtrnáct různých hodnot (1–10 px plus 12/14/16/18) a žádnou škálu; písmo přitom sedm kroků a hlídač má (docs/03, 6. 9. 2026). Tři kroky jsou vybrané měřením, ne okem: 8 px je nejčastější (52 pravidel), 4 px druhé (24) a 12 px kryje velké karty (10). Kapsle je čtvrtý tvar, ne krok. `--r` je rádius povrchu: Kolego `--r-m` (do A-17 10 px), přihlášení 12 px. Literály mimo škálu drží strop v tests/tvary.test.mjs. */ --r-s: 4px; --r-m: 8px; --r-l: 12px; --r-pill: 999px; /* ---------- škála mezer ---------- Šest kroků naměřených na skutečnosti: `gap` mělo v repu 23 různých hodnot, `padding` přes čtyřicet. Tyhle šestky kryjí 82 % všech mezer a odsazení. MIMO ŠKÁLU zůstávají 1 · 2 · 3 px (vlásek uvnitř ikon a odznaků) a 16 · 18 · 20 · 22 · 26 · 28 px (odsazení velkých karet a listu) — srovnat je na `--sp-6` × násobek, ne přidávat další kroky. Platí u `gap`, `border-radius`, `padding` i `margin`. U zkratek jen tehdy, když jsou na škále VŠECHNY složky (nula se počítá): `padding: 10px 12px` se přepíše, `padding: 7px 8px` ne — půl tokenu a půl pixelu se čte hůř než dva pixely. */ --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 12px; --sp-6: 14px; /* řádek seznamu, nabídky a hledání (A-16) */ --rad-x: var(--sp-5); --rad-y: var(--sp-3); --pad: clamp(18px, 5vw, 44px); --col: 1200px; /* ---------- pohyb ---------- Do 23. 9. 2026 neměl pohyb žádný token: 68 různých délek a 10 různých křivek, značková `(.2,.9,.25,1)` opsaná osmnáctkrát (návrh „Kolego v pohybu", docs/03). TŘI křivky, každá s úkolem: · --ease-out příchod — věc přijede a dosedne (šuplík, nabídka, řádek), · --ease-io přesun a odchod — věc, která už je vidět, jde jinam nebo pryč, · --ease-pruzina radost a dopad — JEN kostička a místo, kam něco doletělo; tlačítka a panely nepruží (stroj se hýbe rovnoměrně). ČTYŘI délky: --t-1 najetí a drobnosti, --t-2 nabídky, řádky, odchody, --t-3 šuplík, lišty, sbalení, --t-4 plocha a přelet. Literál křivky v CSS mimo tenhle soubor neprojde hlídačem (`tests/pohyb.test.mjs`); délky se na tokeny převádějí, jak se kterého místa dotkneme, a hlídač drží jejich počet. */ --ease-out: cubic-bezier(.2, .9, .25, 1); --ease-io: cubic-bezier(.4, 0, .2, 1); --ease-pruzina: cubic-bezier(.34, 1.45, .44, 1); --t-1: .12s; --t-2: .2s; --t-3: .3s; --t-4: .45s; /* ---------- vrstvy ---------- Z-index měl hodnoty 1–300 bez škály a paleta ⌘K, okna i rozbalovačky stály na téže dvanáctce — pořadí pak určoval DOM. Sedm pater, mezi nimi mezery na výjimku uvnitř patra (`calc(var(--z-panel) + 1)`). */ --z-lepi: 10; /* lepkavé hlavičky, rail */ --z-panel: 20; /* šuplík, prohlížeč, plocha */ --z-nabidka: 30; /* nabídky, zvonek, popover */ --z-dialog: 40; /* ⌘K, dialog, potvrzení */ --z-toast: 50; --z-tip: 60; /* cedulka, průvodce, vysvícení */ /* ---------- stíny ---------- Tři výšky místo osmnácti kombinací. Na papíře (`.ide.light`, konzole) je stín inkoustový a slabší — přepisují je bloky `body.kolego .ide.light` a `.lg, .st` (konzole má zatím vlastní stíny v `--k-*`). */ --elev-1: 0 1px 2px rgba(0, 0, 0, .3); --elev-2: 0 8px 28px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3); --elev-3: 0 20px 56px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35); } /* ================================================================ chrom pultu (dřív style.css: .ide) — barvy konverzační plochy ================================================================ */ .ide { /* barvy konverzační plochy — světlý režim je přepne všechny naráz */ --c-bg: var(--term); --c-tx: var(--term-tx); --c-dim: var(--term-dim); --c-line: var(--term-line); --c-ok: var(--ok); --c-del: var(--acc); --c-grid: var(--edge-soft); --c-wm: rgba(245, 242, 238, .018); --c-wms: rgba(245, 242, 238, .05); --c-in: #0b0c0f; --c-suplik: var(--ink); /* plocha šuplíku (`.drawer`) — hřbet náhledu souboru vedle něj ji opakuje (prohlizec.css) */ /* Chyba v rozhovoru (řádka činnosti, stav gate, neodeslaná zpráva): na inkoustu světlá `--bad-tma`, na papíře `--bad-papir`. Dřív opsané #ff6b5e / #c2603f (vlna 2, 23. 9. 2026). */ --c-zle: var(--bad-tma); --c-akce: var(--akce-tma); /* barva akce jako písmo a ikona (plocha je `--cta`) */ /* Stav jako písmo (t01): text `-tx`, plocha a tečka `--c-ok` / `--warn` / `--c-zle`; ostrůvek přepíná oboje. */ --c-ok-tx: var(--ok-tma-tx); --c-warn-tx: var(--warn); --c-zle-tx: var(--bad-tma); /* najetí (5 % textu, přepne se s režimem) a výběr (tyrkys), A-21 */ --c-hover: color-mix(in srgb, var(--c-tx) 5%, transparent); --c-vybrano: var(--cta-soft); /* Rodiny odznaku souboru, které nemají stavovou barvu (K-800): zvuk, video, dokument, prezentace. Písmo a znak v té barvě na její 15% ploše drží 4,5 : 1 (tests/kontrast-palety.test.mjs); papír má tmavší odstíny níž. */ --ft-zvuk: #B097F2; --ft-video: #EC82B6; --ft-dok: #93A6F5; --ft-prez: #F2995E; } /* ================================================================ světlý režim pultu (dřív style.css: .ide.light, dva bloky) ================================================================ */ /* Světlo se dělá překlopením čtyř tokenů chromu — plocha, text, tišší text, linka. Zbytek světlé sady (`--c-ok`, `--c-del`, mřížka, vodoznak, papírové neutrály) nastavuje skin níž; dřív to byly TŘI bloky nad sebou (dva tady, jeden ve skinu) a hodnota, kterou člověk našel grepem, nemusela být ta, která platí (audit V3). */ .ide.light { --c-bg: var(--paper); --c-tx: var(--paper-tx); --c-dim: var(--paper-dim); --c-line: var(--paper-line); --c-suplik: var(--paper-2); --edge-hard: color-mix(in srgb, var(--paper-tx) 22%, transparent); /* K-829 */ /* Fialová role na papíře: světlý odstín z tmavého režimu má na off-white pod 3:1. */ --role: #6A46C0; --role-line: rgba(106, 70, 192, .4); --ft-zvuk: #6342BA; --ft-video: #962B63; --ft-dok: #3B50B5; --ft-prez: #9A4510; } /* ================================================================ skin Kolego (dřív style-kolego.css) — vizuální jazyk produktu ================================================================ */ /* ---------- tokeny ---------- */ body.kolego { /* tmavá varianta Kolego */ --ink: #181B20; --panel: #20242B; --sunk: #2A2F37; --edge: rgba(247, 247, 244, .14); --edge-hard: rgba(247, 247, 244, .26); --edge-soft: rgba(247, 247, 244, .05); --tx: #E2E0DB; --dim: #9A9A94; --faint: #7C7C77; /* značka: cihlová s tmavší spodní hranou, tyrkys jako akcent */ --acc: #FF3333; /* Na cihlové píše značka bíle — tak to má logomanuál a tak vypadají tlačítka i odznaky skinu. Podklad na ní zůstával jen na pár místech ze staré grafitové palety (segment „vše" ve spotřebě, odznak zvonku, čip automatizace…) a v cihlové to bylo špatně čitelné (K-196). */ --na-acc: #fff; --acc-2: #D92626; --acc-soft: rgba(255, 51, 51, .13); --acc-line: rgba(255, 51, 51, .42); --teal: #18C5C3; --teal-deep: #129E9C; /* značkový tyrkys: grafy, plochy dat, dekorace */ /* Barva akce. Plná cihlová na tlačítku se čte jako „smazat" — červená je v rozhraních zaběhnutá jako destrukce. Značka si ji drží dál (logo, kostičky, ouško disku, razítka), akce mluví tyrkysem: v logomanuálu je to vědomě studený protipól červené a v paletě „Tyrkys" přesně tahle dvojice slouží jako tlačítko. PLOCHA A PÍSMO JSOU DVĚ BARVY (UX audit, docs/03 8. 10. 2026): #129E9C nesl bílou jen 3,28 : 1, plocha je proto o krok hlubší (bílá 4,89 : 1) a písmo/odkaz/ikona bere `--c-akce` po režimech. Hlídá `tests/kontrast-palety.test.mjs`. */ --cta: #0E7E7C; /* plocha akce, nese bílý text */ --cta-edge: #0A6563; /* hrana a najetí plochy */ --cta-tx: #FFFFFF; /* text NA ploše akce */ --cta-soft: rgba(18, 158, 156, .12); --cta-line: rgba(18, 158, 156, .45); --akce-papir: #0C7472; /* písmo v barvě akce na papíře */ --akce-tma: #15A8A6; /* … na inkoustu (o krok jasnější: 4,5 i na zapuštěné a vybrané) */ --c-akce: var(--akce-papir); /* mimo `.ide` (konzole, poppery na ) je papír */ /* Barva dat (grafy v artefaktu). Značková červená to být nesmí: logomanuál jí dává ~8 % plochy na maskota, kostičky a akce, kdežto pruhy přehledu zaberou půl obrazovky — a červená v číslech navíc čtenáři slibuje „pozor / mínus", který tam není. Sonarová modrá je jediná položka palety bez úkolu (manuál ji drží pro podkladový svět tmavých sekcí), na papíře má kontrast 7:1 a klidně unese velkou plochu. */ --data: #0B5C9E; --data-soft: rgba(11, 92, 158, .13); /* Barva dat NA INKOUSTU: artefakt v tmavém pultu (kostra 2, docs/87) — sonarová modrá má na #181B20 jen 2,5 : 1, světlejší odstín 6,5 : 1; druhá řada grafu je ještě světlejší. Pult je zatím nepoužívá. */ --data-tma: #62A4E4; --data-2-tma: #A9CFF2; /* Sonar není odstín, ale přechod od hlubiny k tyrkysu — v logomanuálu „#082F60 → #21BD84 · podklady". Zatím jediné použití: hlavička nastavení. Až bude graf potřebovat víc řad, stupně se berou odsud. */ --sonar: linear-gradient(103deg, #082F60, var(--data) 45%, var(--teal-deep) 80%, var(--teal)); --ok: #3B9E5F; /* Stavy NA PAPÍŘE. Tytéž tři hodnoty potřebuje světlý režim pultu (`--c-ok` / `--c-del` / `--warn`) i konzole (`--k-ok` / `--k-bad` / `--k-warn`), která je světlá vždycky — proto stojí jednou tady a obě místa je berou aliasem. */ --ok-papir: #2E8054; --warn-papir: #B0740C; --bad-papir: #C93E35; /* Stavy jako PÍSMO (UX audit t01): 4,5 : 1 na papíře, panelu i pilulce; plocha a tečka berou odstíny výš. */ --ok-papir-tx: #267048; --warn-papir-tx: #8A5A06; --bad-papir-tx: #B3352D; /* zelená jako písmo na inkoustu (`--ok` má na zapuštěné ploše 4,0 : 1) */ --ok-tma-tx: #55BD80; /* A protějšek červené NA INKOUSTU. Papírová #C93E35 je na tmavém pultu příliš hluboká, takže si ji každé místo dosud opisovalo jako #FF6B5E (řádka činnosti, stav gate, čipy zamítnutí, ladicí panel). Token je tu proto, aby měla i tmavá strana jedno jméno; opisy se na něj převádějí postupně, jak se kterého místa dotkneme (docs/03, 16. 9. 2026). */ --bad-tma: #FF6B5E; /* Značková žlutá #F5B32F je na světlé off-white nečitelná — logomanuál má pro stavy vlastní dvojici: na papíře tmavší jantar, na inkoustu světlejší. Značce zůstává jen tam, kde je z ní plocha, ne text. */ --warn: #F5BF60; --term: var(--ink); --term-tx: var(--tx); --term-dim: var(--dim); --term-line: rgba(247, 247, 244, .12); --paper: #F7F7F4; --paper-2: #EFEEEA; --paper-tx: #20242B; --paper-dim: #666C74; /* 4,5 : 1 i na panelu (dřív #6A7078: 4,30) */ --paper-line:rgba(32, 36, 43, .12); --paper-acc: var(--acc); --disp: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --head: "Baloo 2", "Source Sans 3", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --r: var(--r-m); /* do A-17 10 px mimo škálu; listy Kolego píšou krok rovnou */ /* Obličeje maskota — jedno místo, odkud si je berou všechny výskyty (řádka v konverzaci, replika v rozhovoru). */ --face-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='23' cy='27' r='6' fill='%23fff'/%3E%3Ccircle cx='41' cy='27' r='6' fill='%23fff'/%3E%3Cpath d='M22 41 Q32 51 42 41' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); --face-think: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='22' cy='24' r='5.5' fill='%23fff'/%3E%3Ccircle cx='40' cy='24' r='5.5' fill='%23fff'/%3E%3Cpath d='M24 43 H40' fill='none' stroke='%23fff' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E"); --face-ask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='23' cy='29' r='6' fill='%23fff'/%3E%3Ccircle cx='41' cy='24' r='6' fill='%23fff'/%3E%3Ccircle cx='32' cy='44' r='5' fill='%23fff'/%3E%3C/svg%3E"); --face-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M17 29 Q23 21 29 29' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M35 29 Q41 21 47 29' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M20 39 Q32 53 44 39' fill='none' stroke='%23fff' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E"); /* Obličej odznaku u repliky se kreslí rovnou v rámu TĚLA kostičky (112 × 92 jako `BRICK` v vzhled/icons.mjs), ne ve čtverci 64 — jinak oči i úsměv sedí jinde než v logu a odznak se s ním nekryje (K-200). Souřadnice jsou z loga posunuté o jeho počátek těla (x −8, y −22). */ --face-brick-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 92'%3E%3Ccircle cx='38' cy='38' r='8' fill='%23fff'/%3E%3Ccircle cx='74' cy='38' r='8' fill='%23fff'/%3E%3Cpath d='M37 61 Q56 77 75 61' fill='none' stroke='%23fff' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E"); --face-brick-ask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 92'%3E%3Ccircle cx='38' cy='42' r='8' fill='%23fff'/%3E%3Ccircle cx='74' cy='34' r='8' fill='%23fff'/%3E%3Ccircle cx='56' cy='64' r='7' fill='%23fff'/%3E%3C/svg%3E"); } /* Světlá sada skinu: mřížka, vodoznak, papír karty a stavy na papíře. Papírové neutrály (`--paper*`) se tu už neopakují — `.ide.light` je nepřebíjí, takže se dědí rovnou z `body.kolego`. */ body.kolego .ide.light { /* stíny na papíře: inkoustové a slabší (tmavé stojí v :root) */ --elev-1: 0 1px 2px rgba(32, 36, 43, .06), 0 2px 8px rgba(32, 36, 43, .05); --elev-2: 0 6px 24px rgba(32, 36, 43, .12), 0 1px 3px rgba(32, 36, 43, .08); --elev-3: 0 18px 48px rgba(32, 36, 43, .2), 0 2px 6px rgba(32, 36, 43, .1); --c-grid: rgba(32, 36, 43, .035); --c-wm: rgba(32, 36, 43, .02); --c-wms: rgba(32, 36, 43, .05); --c-in: #ffffff; --c-ok: var(--ok-papir); --c-del: var(--bad-papir); --c-zle: var(--bad-papir); --c-akce: var(--akce-papir); --warn: var(--warn-papir); --c-ok-tx: var(--ok-papir-tx); --c-warn-tx: var(--warn-papir-tx); --c-zle-tx: var(--bad-papir-tx); /* Sonar na papíře začíná až u modré: hlubina #082F60 se přes off-white projeví jako špinavá šeď a z přechodu není poznat, že někam jde. Barva dat zůstává stejná — graf se kreslí na papír v obou režimech. */ } /* ================================================================ konzole (dřív console.css: .kz) ================================================================ */ /* ---------- tokeny konzole ---------- */ .kz { /* plochy */ --k-paper: #F4F2ED; /* pozadí plochy — o odstín tepleji než papír makety */ --k-card: #FFFFFF; --k-sunk: #F7F5F0; /* zapuštěné pole uvnitř karty */ --k-band: #F1EEE7; /* hlavička tabulky, pruhy */ --k-hover: #F7F5EF; --k-rail: #E4E0D6; /* kolej táhla, prázdná část měřáku */ --k-line: #E2DED4; --k-line-2: #CFCABC; --k-edge: #E0DCD3; /* spodní hrana bílého tlačítka — krok jasu stejně velký jako u tyrkysu */ /* Tmavé ostrůvky ve světlé konzoli: pruh provozovatele, bublina nad grafem, výpis ze stroje, toast. Dělaly tutéž věc dvěma pozadími a třemi světlými texty, protože pro ně nebyl token — a `--k-band` ani `--k-rail` jimi nejsou, ty patří světlé ploše (docs/03, 6. 9. 2026). */ --k-tma: var(--panel); --k-tma-tx: #F2F0EA; --k-tma-dim:#C9C6BE; /* písmo — sedm kroků a nic mezi tím (docs/03, 6. 9. 2026): 9 · 10,5 · 11,5 · 12,5 · 14 · 17 · 22 px. Dřív jich bylo sedmnáct a vedle sebe stály dvojice jako 9 a 9,5, které nikdo nerozezná — jen se udržovaly. */ /* písmo */ --k-tx: var(--paper-tx); --k-dim: var(--paper-dim); --k-faint: var(--dim); /* stavy — plné hodnoty, ne prosvítající */ --k-teal: var(--cta); --k-teal-d: var(--cta-edge); --k-teal-s: #E1F1F0; --k-ok: var(--ok-papir); --k-ok-s: #E4F1E8; --k-warn: var(--warn-papir); --k-warn-s: #FAEED5; --k-bad: var(--bad-papir); --k-bad-s: #FAE4E1; --k-brick: var(--acc); /* tři cesty AI asistenta (Modely a připojení, docs/03 23. 9. 2026) — barva říká „která cesta", ne stav: Claude Code · Anthropic, OpenCode · OpenRouter, OpenCode · Go a Zen. Plná na tečku a nadpis, -s na podklad. */ --k-cesta-a: #B8532A; /* hlína — ne červená: ta v konzoli znamená chybu */ --k-cesta-a-s: #F6E6DD; --k-cesta-o: var(--data); --k-cesta-o-s: #E0ECF6; --k-cesta-g: #6B4FC0; --k-cesta-g-s: #ECE6F8; /* ---------- barvy dat (docs/03, 6. 9. 2026) ---------- Dvě sady, protože kreslení dat má dvě různé úlohy a opačné nároky. RAMPA `--r1…--r5` — kolik z celku, jak moc. Jeden odstín, světlá → tmavá, monotónní. Podíl kreslí VŽDYCKY `--r5`, ať je to disk, spotřeba nebo žebříček; teplotní mapa bere celou rampu. Barva tu znamená „víc = tmavší". ŘADA `--s0…--s3` — kdo. Tři lidé podle spotřeby plus „ostatní" v šedé (`serie()` v konzole.js bere top 3). Barva tu nesmí znamenat „víc", jen „jiný", takže pořadí je závazné a patří ČLOVĚKU, ne jeho pořadí v žebříčku. Pořadí je vybrané měřením, ne okem: dva tyrkysy nesmí stát vedle sebe a šedá nesmí sousedit s jasným tyrkysem. Nejhorší sousední dvojice má odstup ΔE 21 (OKLab ×100) pro běžný barvocit i pro barvoslepost — dřív to bylo 9,5, tedy pod hranicí, kdy se dvě barvy nedají rozeznat. Zelená z řady zmizela: je stavová („hotovo") a v grafu lidí lhala. */ --r1: #D6EDEC; --r2: #A5DAD9; --r3: #5FBFBD; --r4: var(--teal-deep); --r5: var(--cta); --s0: var(--data); /* sonarová modrá */ --s1: var(--teal); /* jasný tyrkys */ --s2: var(--cta); /* hluboký tyrkys */ --s3: #C6C2B6; /* „ostatní" — neutrální, schválně bez odstínu */ } /* ================================================================ přihlášení a druhý faktor (dřív login.css: .lg / .lg.dark) ================================================================ */ /* ---------- tokeny ---------- */ /* Přihlášení je světlý povrch, ale žije pod ``, takže vidí celou paletu skinu. Vypsané jsou proto jen ty tokeny, kterými se od ní LIŠÍ (světlý text, vlastní neutrály, jemnější červená, papírový jantar) — značka, akce a písma se dědí. Průvodce nastavením (`.st`, docs/46) je týž druh povrchu a přichází se na něj touž cestou (z e-mailu, ne z pultu), takže sdílí i tuhle sadu — ne aby si ji opsal do svého listu a rozešel se s ní. Technické stránky (`.mo`, `vzhled/stranky/most.mjs`: návrat z GitHubu a Googlu, relay) jsou třetí povrch téže rodiny. */ .lg, .st, .mo { --elev-1: 0 1px 2px rgba(32, 36, 43, .06), 0 2px 8px rgba(32, 36, 43, .05); --elev-2: 0 6px 24px rgba(32, 36, 43, .12), 0 1px 3px rgba(32, 36, 43, .08); --elev-3: 0 18px 48px rgba(32, 36, 43, .2), 0 2px 6px rgba(32, 36, 43, .1); --card: #FFFFFF; --sunk: #F7F6F2; --line: var(--paper-line); /* role „Linky" vzhledu firmy; dřív natvrdo .13 a firma tu nepůsobila (audit 28. 10. 2026, k3-04/N11) */ --line-2: rgba(32, 36, 43, .22); --tx: var(--paper-tx); --dim: var(--paper-dim); --faint: #9A9A94; /* nejtišší šeď světlého povrchu — skin má na tmavém #7C7C77 */ --btn-edge: #E0DCD3; /* hrana bílého tlačítka — světlá varianta */ --bad: #C8352F; --bad-soft: rgba(200, 53, 47, .1); --warn: #9A6A12; /* jantar tmavší než `--warn-papir`: nese text, ne plochu */ --warn-soft: rgba(245, 191, 96, .22); --r: 12px; /* karta přihlášení je kulatější než chrom aplikace (10px) */ } /* Tmavá sada (audit 28. 10. 2026, 01/N14): přihlášení ji zapíná třídou, technické stránky bez skriptu `prefers-color-scheme`. Hodnoty jednou; `--tx`, `--dim`, `--warn` (= skin) obsadil světlý povrch. */ .lg, .mo { --tma-elev-1: 0 1px 2px rgba(0, 0, 0, .3); --tma-elev-2: 0 8px 28px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3); --tma-elev-3: 0 20px 56px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35); --tma-paper-2: #14171B; --tma-sunk: #262B33; --tma-tx: #E2E0DB; --tma-dim: #9A9A94; --tma-faint: #7C7C77; --tma-cta-soft: rgba(24, 197, 195, .14); --tma-cta-tx: #082A29; --tma-btn-edge: rgba(0, 0, 0, .45); --tma-bad: #F08076; --tma-bad-soft: rgba(240, 128, 118, .12); --tma-warn: #F5BF60; --tma-warn-soft: rgba(245, 191, 96, .14); } .lg.dark { --elev-1: var(--tma-elev-1); --elev-2: var(--tma-elev-2); --elev-3: var(--tma-elev-3); --paper: var(--ink); --paper-2: var(--tma-paper-2); --card: var(--panel); --sunk: var(--tma-sunk); --line: var(--edge); --line-2: var(--edge-hard); --tx: var(--tma-tx); --dim: var(--tma-dim); --faint: var(--tma-faint); --cta: var(--teal); --cta-edge: var(--teal-deep); --cta-soft: var(--tma-cta-soft); --cta-tx: var(--tma-cta-tx); --btn-edge: var(--tma-btn-edge); --bad: var(--tma-bad); --bad-soft: var(--tma-bad-soft); --warn: var(--tma-warn); --warn-soft: var(--tma-warn-soft); } @media (prefers-color-scheme: dark) { .mo { --elev-1: var(--tma-elev-1); --elev-2: var(--tma-elev-2); --elev-3: var(--tma-elev-3); --paper: var(--ink); --paper-2: var(--tma-paper-2); --card: var(--panel); --sunk: var(--tma-sunk); --line: var(--edge); --line-2: var(--edge-hard); --tx: var(--tma-tx); --dim: var(--tma-dim); --faint: var(--tma-faint); --cta: var(--teal); --cta-edge: var(--teal-deep); --cta-soft: var(--tma-cta-soft); --cta-tx: var(--tma-cta-tx); --btn-edge: var(--tma-btn-edge); --bad: var(--tma-bad); --bad-soft: var(--tma-bad-soft); --warn: var(--tma-warn); --warn-soft: var(--tma-warn-soft); } } /* ================================================================ sdílené pohyby — slovník keyframes k tokenům pohybu ================================================================ Keyframes nejsou tokeny, ale patří k nim: tvar pohybu, který má na každém povrchu vypadat stejně. Bydlí tady, protože tenhle list načítá KAŽDÝ povrch (pult, konzole, přihlášení, průvodce nastavením, vzorník) — `komponenty.css` přihlášení nemá. Délku a křivku dává místo použití tokeny (vlna 4 návrhu „Kolego v pohybu", 23. 9. 2026): · kb-hop radost maskota: poskočí o 10 px a nakloní se o 4° — `var(--t-4) var(--ease-pruzina)`, · kb-shake chyba maskota: zavrtí se ze strany na stranu — `var(--t-4) var(--ease-io)`, · krok-dal / krok-zpet panel, který přišel dalším / předchozím krokem (přihlášení, průvodce nastavením) — `var(--t-3) var(--ease-out)`. */ @keyframes kb-hop { 40% { transform: translateY(-10px) rotate(4deg); } } @keyframes kb-shake { 20% { transform: translateX(-6px) rotate(-3deg); } 60% { transform: translateX(6px) rotate(3deg); } } @keyframes krok-dal { from { opacity: 0; transform: translateX(10px); } } @keyframes krok-zpet { from { opacity: 0; transform: translateX(-10px); } } /* Kresba kostičky a maskota (`vzhled/icons.mjs`) je taky na každém povrchu (audit 28. 10. 2026, 11/N14). */ .brick .b, .mascot .b { fill: var(--acc); } .brick .e, .mascot .e { fill: var(--acc-2); opacity: .55; } .brick .f, .mascot .f { fill: #fff; } .brick .s, .mascot .s { fill: none; stroke: #fff; stroke-width: 8; stroke-linecap: round; }