/* ============================================================
   ICC-Plus Import — designové tokeny
   ------------------------------------------------------------
   GENEROVÁNO (20.09.2026) z repozitáře brand-tokens. NEUPRAVUJ RUČNĚ.
   Barvu, písmo nebo zaoblení měň v ~/brand-tokens/tokens/ a spusť
   `npm run build`; pak tenhle soubor zkopíruj do aplikace.
   Návod: ~/brand-tokens/NAPOVEDA.md
   ============================================================ */

:root {
  color-scheme: light dark;
  --duration-rychle: 120ms;
  --duration-vychozi: 220ms;
  --duration-pomalu: 400ms;
  --easing-vychozi: cubic-bezier(0.25, 0.1, 0.25, 1);
  --easing-vystup: cubic-bezier(0.4, 0, 1, 1);
  --shadow-karta: 0 10px 40px rgba(31, 32, 36, 0.08);
  --shadow-vyssi: 0 20px 60px rgba(31, 32, 36, 0.12);
  --shadow-plovouci: 0 24px 70px rgba(0, 0, 0, 0.45);
  --space-3xs: 0.25rem;
  --space-2xs: 0.375rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem; /* Svislé odsazení sekcí na webech. */
  --radius-sm: 10px; /* Drobné prvky — štítky, vstupní pole. */
  --radius-md: 18px; /* Výchozí zaoblení karet a panelů. */
  --radius-lg: 28px; /* Velké bloky, hero, modály. */
  --radius-full: 999px; /* Tlačítka a pilulky. */
  --border-width-hairline: 1px;
  --border-width-silna: 2px; /* Obrys tlačítek a zvýrazněných karet. */
  --layout-obsah-max: 1180px; /* Maximální šířka obsahu na webech. */
  --layout-text-max: 62ch; /* Maximální šířka odstavce kvůli čitelnosti. */
  --layout-gutter: 1.5rem; /* Boční okraj na mobilu. */
  --layout-hlavicka-v: 58px; /* Výška horní lišty v interních aplikacích. */
  --font-size-h1: clamp(2.4rem, 5vw, 4rem);
  --font-size-h2: clamp(1.9rem, 3.5vw, 2.8rem);
  --font-size-h3: clamp(1.25rem, 2vw, 1.55rem);
  --font-size-lead: clamp(1.1rem, 1.6vw, 1.35rem); /* Úvodní odstavec pod nadpisem. */
  --font-size-body: 1.05rem;
  --font-size-small: 0.9rem;
  --font-size-micro: 0.78rem; /* Popisky v tabulkách a štítcích. */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 800; /* Jen pro velké nadpisy. */
  --line-height-nadpis: 1.1;
  --line-height-text: 1.65;
  --line-height-hutny: 1.35; /* Tabulky a hustá data. */
  --letter-spacing-nadpis: -0.02em;
  --letter-spacing-verzalky: 0.12em; /* Prostrkání u textu VERZÁLKAMI (eyebrow, štítky). */
  --paleta-limetka-100: #eef5cf;
  --paleta-limetka-300: #d3e57e;
  --paleta-limetka-500: #bbd331; /* Změřeno z vektorového loga (logo_tisk_ve_firme_samostatne_poppins.ai), 20.09.2026. */
  --paleta-limetka-600: #9bb82b; /* Hover a text akcentu na světlém podkladu. */
  --paleta-limetka-800: #61760d; /* Limetka ztmavená do čitelnosti — akcent jako TEXT na bílé (5,1 : 1). Odstíny 500 a 600 na to kontrast nemají. */
  --paleta-navy-100: #e8edf8; /* Jemné modré pozadí sekce na světlé stránce. */
  --paleta-navy-300: #4a69b0; /* Zesvětlená — linky a obrysy na modrém podkladu. */
  --paleta-navy-500: #254491; /* Modrá z loga — změřená z vektoru, ne z PNG (dřív #284890). Oblouk a čtverečky. */
  --paleta-navy-600: #1d3569; /* Ztmavená — přechody, hover, spodek patičky. */
  --paleta-navy-700: #14244a; /* Nejhlubší odstín pro spodní pruh patičky. */
  --paleta-grafit-0: #ffffff;
  --paleta-grafit-50: #f5f7f2;
  --paleta-grafit-100: #e6e8e3;
  --paleta-grafit-200: #c7cad0;
  --paleta-grafit-300: #8a8e98;
  --paleta-grafit-400: #4a4d55;
  --paleta-grafit-500: #33363c;
  --paleta-grafit-600: #212327;
  --paleta-grafit-700: #1f2024;
  --paleta-grafit-800: #15161a;
  --paleta-grafit-900: #0e0f12;
  --paleta-stav-ok: #3fb950; /* Světlá varianta — čitelná na tmavém podkladu, na bílé ne. */
  --paleta-stav-varovani: #d29922;
  --paleta-stav-chyba: #e5484d;
  --paleta-stav-info: #58a6ff;
  --paleta-stav-ok-tmava: #1a7f37; /* Tmavá varianta pro text a ikony na světlém podkladu. */
  --paleta-stav-varovani-tmava: #a16207;
  --paleta-stav-chyba-tmava: #c62f2f;
  --paleta-stav-info-tmava: #1f6fd6;
  --paleta-stav-ok-plocha: #e7f6ea; /* Jemné pozadí štítku ve světlém režimu. */
  --paleta-stav-varovani-plocha: #fdf3e0;
  --paleta-stav-chyba-plocha: #fdeaea;
  --paleta-stav-info-plocha: #e8f1fd;
  --paleta-stav-ok-plocha-tmava: #16301f; /* Jemné pozadí štítku v tmavém režimu. */
  --paleta-stav-varovani-plocha-tmava: #33270e;
  --paleta-stav-chyba-plocha-tmava: #35191b;
  --paleta-stav-info-plocha-tmava: #15243b;
  --paleta-partner-canon: #cc0000;
  --paleta-partner-canon-tmava: #a30000;
  --paleta-spotrebni-cyan: #009fc7;
  --paleta-spotrebni-magenta: #d13a9e;
  --paleta-spotrebni-yellow: #e2b100;
  --paleta-spotrebni-black: #33353a;
  --font-family-nadpis: 'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif; /* Nadpisy a tlačítka. Na webech se načítá z Google Fonts, v interních aplikacích stačí systémový zálohový řetězec. */
  --font-family-text: 'Open Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; /* Běžný text. */
  --font-family-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; /* Čísla, sériová čísla strojů, logy, kód. */
  --color-pozadi-base: #ffffff; /* Pozadí stránky. */
  --color-pozadi-jemne: #f5f7f2; /* Střídavé pozadí sekcí a řádků tabulek. */
  --color-pozadi-karta: #ffffff; /* Panel, karta, dlaždice. */
  --color-pozadi-vnitrek: #f5f7f2; /* Zapuštěná plocha uvnitř karty (graf, log, vstup). */
  --color-pozadi-tmave: #254491; /* Tmavá sekce na světlé stránce (patička, hero). Modrá ze značky — weby stojí na logu, interní aplikace zůstávají na grafitu (color.hlavicka.pozadi). */
  --color-text-hlavni: #1f2024;
  --color-text-jemny: #4a4d55; /* Odstavce, sekundární text. */
  --color-text-tlumeny: #8a8e98; /* Popisky, metadata, neaktivní text. */
  --color-text-na-akcentu: #1f2024; /* Text na limetkovém tlačítku — limetka je světlá, text na ní je tmavý. */
  --color-text-na-tmavem: #f3f5ee; /* Text na tmavé sekci. */
  --color-akcent-base: #bbd331; /* Tlačítka, aktivní stav, zvýraznění. */
  --color-akcent-hover: #9bb82b;
  --color-akcent-text: #61760d; /* Akcent jako TEXT na světlém podkladu (odkaz, eyebrow). Limetka 500 ani 600 nemá na bílé dost kontrastu. */
  --color-akcent-jemne: #eef5cf; /* Jemné pozadí zvýrazněného bloku. */
  --color-linka-base: #e6e8e3; /* Okraje karet, oddělovače. */
  --color-linka-vyrazna: #c7cad0; /* Okraj vstupního pole, zvýrazněný rámeček. */
  --color-hlavicka-pozadi: #1f2024; /* Horní lišta aplikace. */
  --color-hlavicka-text: #f3f5ee;
  --color-stav-ok: #1a7f37; /* Text a ikona stavu na světlém podkladu. */
  --color-stav-varovani: #a16207;
  --color-stav-chyba: #c62f2f;
  --color-stav-info: #1f6fd6;
  --color-stav-ok-plocha: #e7f6ea; /* Pozadí štítku; text na něm je color.stav.ok. */
  --color-stav-varovani-plocha: #fdf3e0;
  --color-stav-chyba-plocha: #fdeaea;
  --color-stav-info-plocha: #e8f1fd;
}

/* Tmavý režim — podle nastavení systému. Aplikace, která má vlastní
   přepínač, si vynutí režim atributem data-motiv na <html>. */
@media (prefers-color-scheme: dark) {
  :root:not([data-motiv="svetly"]) {
    --color-pozadi-base: #15161a;
    --color-pozadi-jemne: #212327;
    --color-pozadi-karta: #212327;
    --color-pozadi-vnitrek: #0e0f12;
    --color-pozadi-tmave: #0e0f12;
    --color-text-hlavni: #f1f3ec;
    --color-text-jemny: #c7cad0;
    --color-text-tlumeny: #9aa0a8;
    --color-text-na-akcentu: #1f2024;
    --color-text-na-tmavem: #f1f3ec;
    --color-akcent-base: #bbd331;
    --color-akcent-hover: #d3e57e; /* V tmavém režimu se na hover přisvětluje, ne ztmavuje. */
    --color-akcent-text: #bbd331; /* Na tmavém podkladu má limetka 500 kontrast dost — tmavší odstín by byl hůř čitelný. */
    --color-akcent-jemne: #272a22;
    --color-linka-base: #33363c;
    --color-linka-vyrazna: #4a4d55;
    --color-hlavicka-pozadi: #0e0f12;
    --color-hlavicka-text: #f1f3ec;
    --color-stav-ok: #3fb950;
    --color-stav-varovani: #e3b341; /* Přisvětlená varianta — #d29922 je na tmavém podkladu málo čitelná. */
    --color-stav-chyba: #f85149;
    --color-stav-info: #58a6ff;
    --color-stav-ok-plocha: #16301f;
    --color-stav-varovani-plocha: #33270e;
    --color-stav-chyba-plocha: #35191b;
    --color-stav-info-plocha: #15243b;
  }
}

:root[data-motiv="tmavy"] {
  --color-pozadi-base: #15161a;
  --color-pozadi-jemne: #212327;
  --color-pozadi-karta: #212327;
  --color-pozadi-vnitrek: #0e0f12;
  --color-pozadi-tmave: #0e0f12;
  --color-text-hlavni: #f1f3ec;
  --color-text-jemny: #c7cad0;
  --color-text-tlumeny: #9aa0a8;
  --color-text-na-akcentu: #1f2024;
  --color-text-na-tmavem: #f1f3ec;
  --color-akcent-base: #bbd331;
  --color-akcent-hover: #d3e57e; /* V tmavém režimu se na hover přisvětluje, ne ztmavuje. */
  --color-akcent-text: #bbd331; /* Na tmavém podkladu má limetka 500 kontrast dost — tmavší odstín by byl hůř čitelný. */
  --color-akcent-jemne: #272a22;
  --color-linka-base: #33363c;
  --color-linka-vyrazna: #4a4d55;
  --color-hlavicka-pozadi: #0e0f12;
  --color-hlavicka-text: #f1f3ec;
  --color-stav-ok: #3fb950;
  --color-stav-varovani: #e3b341; /* Přisvětlená varianta — #d29922 je na tmavém podkladu málo čitelná. */
  --color-stav-chyba: #f85149;
  --color-stav-info: #58a6ff;
  --color-stav-ok-plocha: #16301f;
  --color-stav-varovani-plocha: #33270e;
  --color-stav-chyba-plocha: #35191b;
  --color-stav-info-plocha: #15243b;
}