/* ============================================================ NahrAI portál — design tokens (UI v2) Zdroj pravdy pro barvy, typografii, rádiusy, stíny a spacing. Vše je scopované pod [data-ui="v2"], aby se nic nemíchalo se stávajícím produkčním CSS. ============================================================ */ [data-ui="v2"] { /* --- Plochy a pozadí --- */ --bg: #F4F4F7; /* pozadí aplikace */ --bg-2: #EAEBF0; /* zapuštěné plochy, prázdné grafy, chipy */ --surface: #FFFFFF; /* karty, rail, header */ --surface-2: #FAFAFB; /* hlavičky tabulek, inputy, sekundární plochy */ /* --- Text --- */ --ink: #191D28; /* primární text, nadpisy */ --ink-2: #5F6979; /* sekundární text, popisky */ --ink-3: #646E81; /* terciární text, placeholdery, meta (návrh měl #8D96A6 = 2,86:1 na --surface-2; ztmaveno na 4,51:1, audit 2026-08 pak ještě o odstín: na --bg #F4F4F7 dávalo #6A7487 jen 4,19:1, #646E81 dává 4,73:1 na --bg a 5,2:1 na kartě) */ /* --- Linky --- */ --line: #E5E6EC; /* oddělovače, okraje karet */ --line-2: #D6D9E1; /* okraje interaktivních prvků (tlačítka, selecty) */ /* --- Akcentní (značka NahrAI) --- */ --accent: #E04A45; /* výplně, ikony, aktivní stav */ --accent-hover:#C63E39; /* hover výplně */ --accent-text: #C43D38; /* !! akcentní TEXT na světlém pozadí (viz A11Y); na --accent-soft 4,53:1 (dřívější #C63E39 dávalo 4,45) */ --accent-soft: #FCEDEB; /* jemné pozadí (aktivní nav, badge, callout) */ --accent-line: #F3CBC7; /* okraj akcentního callouctu / dropzóny */ /* --- Stavové --- */ --ok: #127A52; --ok-soft: #E4F3EC; /* uloženo, potvrzeno */ --warn: #8F6206; --warn-soft: #FAF0DA; /* vytěžuje se, nízká jistota */ --info: #2A63A8; --info-soft: #E9F0FB; /* násypka, ABRA desktop */ /* Chybový stav. Návrh ho nedodal, protože prototyp chyby neukazuje; portál je ale potřebuje (neúspěšné vytěžení, deaktivovaný účet, zamítnutá příloha). Odstín je záměrně tmavší a méně oranžový než značkový --accent, aby se chyba nepletla s běžným akcentem: 6,54:1 na kartě, 5,61:1 na --bad-soft. */ --bad: #B3261E; --bad-soft: #FBEAE8; /* Fokusový kroužek (:focus-visible) — jediná barva pro celou aplikaci, aby fokus nešel zaměnit s akcentem ani se stavem „zapnuto". Světlý motiv = --info (3,7:1 na kartě i na --bg), tmavý #74ABEC. */ --focus: #2A63A8; /* --- Stíny --- */ --shadow: 0 1px 2px rgba(25,29,40,.05), 0 10px 26px -16px rgba(25,29,40,.28); --shadow-lg: 0 14px 34px -16px rgba(25,29,40,.35); --shadow-pop: 0 18px 40px -16px rgba(25,29,40,.45); --shadow-accent: 0 8px 18px -10px var(--accent); /* --- Doplněno při implementaci (pravidlo: žádný hex mimo tokens.css) --- --on-accent: text/ikony na akcentní a stavové výplni — bílá funguje v obou motivech (accent light #C63E39 = 5.06:1, dark #FF6A60 s bold textem). --avatar-1/2: gradient avataru dle prototypu; záměrně stejný v obou motivech, aby iniciály zůstaly čitelné i ve tmavém režimu. */ --on-accent: #FFFFFF; /* text na plné zelené výplni: světlý motiv tmavá zeleň (bílá 5.3:1), tmavý motiv světlá zeleň → bílá by měla jen 2.3:1, proto tmavý text */ --on-ok: #FFFFFF; /* VÝPLŇ pod bílým textem. --accent (#E04A45) dává s bílou jen 4,01:1, proto se na plné tlačítko používá tmavší značkový odstín (5,06:1). Samotný --accent zůstává pro ikony, okraje a aktivní stavy, kde platí mírnější požadavek 3:1. */ --accent-fill: #C63E39; /* Okraj FORMULÁŘOVÉHO POLE je jediný znak, podle kterého jde pole poznat, takže musí splnit 3:1 (WCAG 1.4.11). --line-2 (1,41:1) stačí na tlačítka, která nese i text, ale ne na inputy a selecty. */ --field-line: #848DA5; --avatar-1: #343B4E; --avatar-2: #5A6478; /* Marker zvýraznění v náhledu dokladu (README §2) kreslí VŽDY na bílý list PDF — barva je záměrně nezávislá na motivu (tmavý --accent by na bílém papíře neměl kontrast 3:1). */ /* List dokladu se vykresluje vždy jako papír, nezávisle na motivu — proto je barva i stín pevný token, ne odvozenina od --surface. */ --tier-gold: #6B4C06; --tier-gold-soft: #F4E3BD; /* úroveň licence Premium */ --tier-steel: #1F4A70; --tier-steel-soft: #D9E6F2; /* úroveň licence Standard */ --paper: #FFFFFF; --paper-shadow: 0 2px 10px rgba(25, 29, 40, .18); --marker-fill: rgba(224, 74, 69, .16); --marker-ring: #E04A45; /* překryv pod modálními okny (tmavne stejně v obou motivech) */ --scrim: rgba(15, 17, 23, .55); /* --- Rádiusy --- */ --r-xs: 6px; /* type-chipy, malé značky */ --r-sm: 8px; /* ikonová tlačítka v toolbaru */ --r-md: 10px; /* inputy, sekundární tlačítka, položky v dropdownu */ --r-lg: 12px; /* primární tlačítka, pole formuláře */ --r-xl: 14px; /* menší karty, callouty */ --r-2xl: 16px; /* hlavní karty, plovoucí lišty */ --r-pill: 999px; /* --- Spacing (4px základ; liché hodnoty z prototypu zaokrouhlujte sem) --- */ --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 12px; --sp-6: 14px; --sp-7: 16px; --sp-8: 20px; --sp-9: 24px; --sp-10: 32px; /* --- Typografie --- */ --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; /* --- Layout --- */ --rail-w: 64px; /* ikonový rail */ --rail-w-expanded: 216px; /* rail s popisky */ --header-h: 63px; /* sticky hlavička */ /* Odsazení všeho, co se má zastavit POD hlavičkou (lepivé prvky v obsahu) i cíle odkazů uvnitř stránky — jinak skok schová nadpis za hlavičku. */ --sticky-top: 88px; --content-max: 1600px; --content-pad: 24px; /* --- Animace --- */ --ease: cubic-bezier(.2,.8,.3,1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 240ms; color-scheme: light; } [data-ui="v2"][data-theme="dark"] { --bg: #0F1117; --bg-2: #171A22; --surface: #181B23; --surface-2: #1D212A; --ink: #ECEEF4; --ink-2: #98A1B4; --ink-3: #808899; /* 3,48:1 -> 4,53:1 na --surface-2 */ --line: #262A34; --line-2: #333846; --accent: #FF6A60; --accent-hover:#FF8078; --accent-text: #FF8078; --accent-soft: #2C1D1C; --accent-line: #4A2C2A; --ok: #4FC08D; --ok-soft: #132A20; --warn: #DFAA44; --warn-soft: #2A2214; --info: #74ABEC; --info-soft: #152232; --bad: #F2867E; --bad-soft: #2E1614; /* 6,96:1 na kartě */ --focus: #74ABEC; /* fokusový kroužek (= --info dark) */ --tier-gold: #E8C877; --tier-gold-soft: #2C2412; --tier-steel: #9CC3E8; --tier-steel-soft: #16232F; --on-ok: #0F1117; /* Ve tmavém motivu je akcent světlý — bílý text na něm má 2,81:1. Text na plné akcentní výplni je proto tmavý a výplň zůstává značková. */ --on-accent: #14161D; --accent-fill: #FF6A60; --field-line: #616B86; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 30px -18px rgba(0,0,0,.8); --shadow-lg: 0 16px 36px -18px rgba(0,0,0,.85); --shadow-pop: 0 20px 44px -18px rgba(0,0,0,.9); color-scheme: dark; } /* Tmavý režim sleduje systém, dokud si uživatel nezvolí ručně (pak se na zapíše data-theme="light|dark" a tato větev se neuplatní). */ @media (prefers-color-scheme: dark) { [data-ui="v2"]:not([data-theme]) { --bg:#0F1117; --bg-2:#171A22; --surface:#181B23; --surface-2:#1D212A; --ink:#ECEEF4; --ink-2:#98A1B4; --ink-3:#808899; --line:#262A34; --line-2:#333846; --accent:#FF6A60; --accent-hover:#FF8078; --accent-text:#FF8078; --accent-soft:#2C1D1C; --accent-line:#4A2C2A; --ok:#4FC08D; --ok-soft:#132A20; --warn:#DFAA44; --warn-soft:#2A2214; --info:#74ABEC; --info-soft:#152232; --on-ok:#0F1117; --bad:#F2867E; --bad-soft:#2E1614; --focus:#74ABEC; --tier-gold:#E8C877; --tier-gold-soft:#2C2412; --tier-steel:#9CC3E8; --tier-steel-soft:#16232F; --on-accent:#14161D; --accent-fill:#FF6A60; --field-line:#616B86; --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 30px -18px rgba(0,0,0,.8); color-scheme: dark; } } /* ============================================================ Typografická škála — přesně dle prototypu ============================================================ */ [data-ui="v2"] .t-kpi { font: 700 30px/1.1 var(--font-sans); letter-spacing:-.03em; } [data-ui="v2"] .t-h1 { font: 700 24px/1.2 var(--font-sans); letter-spacing:-.02em; } [data-ui="v2"] .t-h1-hello { font: 700 26px/1.2 var(--font-sans); letter-spacing:-.02em; } [data-ui="v2"] .t-h2 { font: 700 21px/1.25 var(--font-sans); letter-spacing:-.02em; } [data-ui="v2"] .t-lead { font: 600 15.5px/1.4 var(--font-sans); } [data-ui="v2"] .t-value { font: 600 14.5px/1.35 var(--font-sans); } [data-ui="v2"] .t-body { font: 500 14px/1.45 var(--font-sans); } [data-ui="v2"] .t-ui { font: 600 13.5px/1.4 var(--font-sans); } /* tlačítka, buňky */ [data-ui="v2"] .t-cell { font: 400 13px/1.4 var(--font-sans); } /* hustá tabulka */ [data-ui="v2"] .t-help { font: 400 12.5px/1.5 var(--font-sans); } /* vysvětlující text */ /* Popisky a záhlaví tabulek: audit UI 2026-08 stanovil minimum 12 px pro účetně relevantní drobný text (dřív 11,5 / 11 px). */ [data-ui="v2"] .t-meta { font: 400 12px/1.4 var(--font-sans); } [data-ui="v2"] .t-eyebrow { font: 700 12px/1.2 var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); } [data-ui="v2"] .t-th { font: 700 12px/1.2 var(--font-sans); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); } [data-ui="v2"] .t-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ============================================================ Keyframes použité v návrhu ============================================================ */ @keyframes nahrai-shift { from { background-position: 0 0; } to { background-position: 32px 0; } } @keyframes nahrai-pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } } @media (prefers-reduced-motion: reduce) { [data-ui="v2"] * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ============================================================ A11Y — POZOR --accent #E04A45 má vůči bílé kontrast 4.0:1. • Stačí pro: ikony, okraje, výplně, TEXT ≥ 18.66px/700 nebo ≥ 24px. • NESTAČÍ pro: drobný akcentní text (12–14px badge, odkazy). → Pro takový text používejte --accent-text (#C63E39, 5.06:1). • Bílý text na výplni --accent (tlačítka 13.5–14px/600) je rovněž 4.0:1. → Doporučení: výplň primárních tlačítek ve světlém režimu posunout na #C63E39 (kontrast 5.06:1). Vizuálně nerozeznatelný rozdíl, WCAG AA splněno. K odsouhlasení v preview. ============================================================ */