/* =============================================================================
   Axlon — portovane designove tokeny
   -----------------------------------------------------------------------------
   GENEROVANO nastrojem tools/port-tokenu.py. Needituj rucne.

   Zdroj pravdy je design/tokens.css - zmrazene meritko. Tenhle soubor je jeho
   podmnozina: obsahuje jen tokeny, ktere si dosud postavene komponenty vyzadaly,
   plus jejich tranzitivni zavislosti. Seznam drzi Axlon.Kit/tokens.manifest.

   Prekresleni po zmene manifestu:  python3 tools/port-tokenu.py
   Kontrola aktualnosti:            ./tools/brana-tokenu.sh
   ========================================================================== */

:root {
  /* Jen "light" — ne "light dark". Jinak prohlížeč kreslí posuvníky a nativní ovládací prvky podle systému, i když je zapnutý světlý motiv. */
  color-scheme: light;
  /* =========================================================================== 1. PRIMITIVY ======================================================================== */
  /* --- 1.1 Neutrály — chladně neutrální, světlé linky. ------------------- */
  --axl-n-0: #ffffff;
  --axl-n-25: #fbfcfe;
  --axl-n-50: #f5f8fc;
  --axl-n-100: #eaeff7;
  --axl-n-200: #dce3ee;
  --axl-n-300: #c3ccdb;
  --axl-n-400: #9aa6ba;
  --axl-n-500: #64718b;
  --axl-n-600: #58657c;
  --axl-n-700: #3f4a5e;
  --axl-n-800: #2c3547;
  --axl-n-850: #242c3b;
  --axl-n-900: #1c2331;
  --axl-n-950: #151b26;
  --axl-n-1000: #0d121a;
  /* --- 1.2 Akvamarínová — barva značky a všech interaktivních prvků. ------ */
  --axl-p-25: #eefaf9;  /* podklad vybraného řádku — viz § 2.6 */
  --axl-p-50: #e3f6f5;
  --axl-p-100: #baeae8;
  --axl-p-200: #82d6d3;
  --axl-p-300: #45bcb9;
  --axl-p-500: #0b8280;
  --axl-p-600: #096a69;
  --axl-p-700: #075352;
  --axl-p-800: #054040;
  --axl-p-900: #032c2c;
  /* --- 1.3 Zelená — pásmo „v pořádku“, potvrzení. Posunutá zeleněji než akční akvamarínová, aby se „je to v pořádku“ nepletlo s „tady se dá kliknout“. ------------------------------------- */
  --axl-g-50: #edf8f1;
  --axl-g-200: #90d0a8;
  --axl-g-300: #52b077;
  --axl-g-500: #1a7f4e;
  --axl-g-800: #0d3b24;
  /* --- 1.4 Jantarová — pásmo „ke sledování“, varování. --------------------- */
  --axl-a-50: #fdf3e0;
  --axl-a-200: #f0c46a;
  --axl-a-300: #e0a52f;
  --axl-a-500: #9a6a0d;
  --axl-a-600: #7c5409;
  --axl-a-800: #452e05;
  /* --- 1.5 Červená — pásmo „rizikové“, chyba, destruktivní akce. ----------- */
  --axl-r-50: #fdeceb;
  --axl-r-200: #f0a49f;
  --axl-r-300: #e0736c;
  --axl-r-500: #ab332c;
  --axl-r-600: #8b2621;
  --axl-r-800: #511513;
  /* --- 1.6 Kategoriální paleta pro grafy ---------------------------------- Okabe–Ito. Navržená pro deuteranopii i protanopii, volně použitelná. Pořadí je závazné: série #1 vždy bere --axl-q-1. */
  --axl-q-1: #0072b2;  /* modrá     */
  --axl-q-2: #e69f00;  /* oranžová  */
  --axl-q-3: #009e73;  /* zelená    */
  --axl-q-4: #cc79a7;  /* růžová    */
  --axl-q-5: #56b4e9;  /* světle modrá */
  --axl-q-6: #d55e00;  /* rumělková */
  /* --- 1.7 Rozměrová škála — 2px základ, násobky 4 od --axl-sp-4 výš. ------ */
  --axl-sp-1: 2px;
  --axl-sp-2: 4px;
  --axl-sp-3: 6px;
  --axl-sp-4: 8px;
  --axl-sp-5: 12px;
  --axl-sp-6: 16px;
  --axl-sp-7: 20px;
  --axl-sp-8: 24px;
  --axl-sp-9: 32px;
  --axl-sp-10: 40px;
  --axl-sp-11: 48px;
  --axl-sp-12: 64px;
  /* --- 1.8 Typografická škála — velikost a řádkování jsou spárované. ------ */
  --axl-fs-1: 11px;
  --axl-lh-1: 15px;
  --axl-fs-2: 12px;
  --axl-lh-2: 16px;
  --axl-fs-3: 13px;
  --axl-lh-3: 18px;
  --axl-fs-4: 14px;
  --axl-fs-5: 16px;
  --axl-lh-5: 22px;
  --axl-fs-6: 18px;
  --axl-lh-6: 26px;
  --axl-fs-7: 22px;
  --axl-lh-7: 28px;
  --axl-fs-8: 28px;
  --axl-lh-8: 32px;
  /* --- 1.9 Poloměry ------------------------------------------------------- */
  --axl-rad-1: 3px;
  --axl-rad-2: 5px;
  --axl-rad-3: 8px;
  --axl-rad-5: 999px;
  /* --- 1.10 Tloušťky rámečků ---------------------------------------------- */
  --axl-bw-1: 1px;
  --axl-bw-2: 2px;
  --axl-bw-3: 3px;
  /* --- 1.11 Výškové kroky pro ovládací prvky a řádky ----------------------- */
  --axl-h-1: 22px;
  --axl-h-2: 26px;
  --axl-h-3: 30px;
  --axl-h-4: 36px;
  --axl-h-5: 44px;
  --axl-h-6: 52px;
  /* --- 1.12 Váhy písma ---------------------------------------------------- */
  --axl-fw-1: 400;
  --axl-fw-2: 500;
  --axl-fw-3: 600;
  --axl-fw-4: 700;
  /* --- 1.13 Čas a křivka -------------------------------------------------- */
  --axl-t-1: 90ms;
  --axl-t-3: 240ms;
  --axl-ease: cubic-bezier(0.2, 0, 0.1, 1);
  /* =========================================================================== 2. SÉMANTIKA — světlý motiv Tohle je jediná vrstva, na kterou smí komponenta sáhnout (plus vrstva 3). ======================================================================== */
  /* --- 2.1 Písmo ---------------------------------------------------------- Systémový zásobník. Žádný webfont: běží offline a licenčně bez otazníků. Číselné sloupce jedou na tabulkových číslicích — bez nich se hustá tabulka nedá číst po sloupci. */
  --axl-font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --axl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* Nadpisy a čísla jsou samostatné role. Výchozí hodnota je tatáž rodina jako rozhraní — existují proto, aby šel typ písma posunout tokenem, ne v komponentě. */
  --axl-font-display: var(--axl-font-ui);
  --axl-font-numeric: var(--axl-font-ui);
  /* --- 2.2 Typografické role — velikost i řádkování v jednom kroku. -------- */
  --axl-text-micro: var(--axl-fs-1);
  --axl-text-micro-lh: var(--axl-lh-1);
  --axl-text-caption: var(--axl-fs-2);
  --axl-text-caption-lh: var(--axl-lh-2);
  --axl-text-body: var(--axl-fs-3);
  --axl-text-body-lh: var(--axl-lh-3);
  --axl-text-body-lg: var(--axl-fs-4);
  --axl-text-title-sm: var(--axl-fs-5);
  --axl-text-title-sm-lh: var(--axl-lh-5);
  --axl-text-title: var(--axl-fs-6);
  --axl-text-title-lh: var(--axl-lh-6);
  --axl-text-title-lg: var(--axl-fs-7);
  --axl-text-title-lg-lh: var(--axl-lh-7);
  --axl-text-metric: var(--axl-fs-8);
  --axl-text-metric-lh: var(--axl-lh-8);
  --axl-weight-regular: var(--axl-fw-1);
  --axl-weight-medium: var(--axl-fw-2);
  --axl-weight-semibold: var(--axl-fw-3);
  --axl-weight-bold: var(--axl-fw-4);
  --axl-tracking-tight: -0.012em;  /* velké nadpisy a metriky */
  --axl-tracking-normal: 0;
  --axl-tracking-caps: 0.06em;  /* verzálkové popisky, jen do 12px */
  /* --- 2.3 Odsazení -------------------------------------------------------- */
  --axl-space-3xs: var(--axl-sp-1);
  --axl-space-2xs: var(--axl-sp-2);
  --axl-space-xs: var(--axl-sp-3);
  --axl-space-sm: var(--axl-sp-4);
  --axl-space-md: var(--axl-sp-5);
  --axl-space-lg: var(--axl-sp-6);
  --axl-space-2xl: var(--axl-sp-8);
  --axl-space-4xl: var(--axl-sp-10);
  --axl-space-6xl: var(--axl-sp-12);
  /* --- 2.4 Geometrie ------------------------------------------------------ Poloměry i tloušťky jsou tokeny právě proto, aby nevznikaly náhodně. Rozhraní má dva poloměry: ovládací prvek a plocha. Nic mezi tím. */
  --axl-radius-control: var(--axl-rad-2);  /* tlačítko, pole, štítek */
  --axl-radius-surface: var(--axl-rad-3);  /* karta, panel, dialog */
  --axl-radius-small: var(--axl-rad-1);  /* buňka heatmapy, odznak */
  --axl-radius-pill: var(--axl-rad-5);  /* filtrační štítek, čítač */
  --axl-border-hair: var(--axl-bw-1);  /* výchozí dělicí linka */
  --axl-border-thin: var(--axl-bw-2);  /* zvýrazněná hrana, aktivní tab */
  --axl-border-thick: var(--axl-bw-3);  /* levý pruh vybraného řádku */
  /* --- 2.5 Výšky ovládacích prvků a řádků ---------------------------------- */
  --axl-control-h-xs: var(--axl-h-1);
  --axl-control-h-sm: var(--axl-h-2);
  --axl-control-h-md: var(--axl-h-3);  /* výchozí pro filtry a tlačítka */
  --axl-control-h-lg: var(--axl-h-4);
  --axl-control-h-xl: var(--axl-h-5);
  --axl-row-h-dense: var(--axl-h-3);  /* hlavní tabulka: 25 řádků na jednu obrazovku */
  --axl-icon-sm: 14px;
  --axl-icon-md: 16px;
  --axl-icon-lg: 20px;
  /* --- 2.6 Plochy ---------------------------------------------------------- */
  --axl-color-canvas: var(--axl-n-50);  /* podklad aplikace */
  --axl-color-surface: var(--axl-n-0);  /* karta, tabulka */
  --axl-color-surface-raised: var(--axl-n-0);  /* panel, popover, dialog */
  --axl-color-surface-sunken: var(--axl-n-25);  /* hlavička tabulky, lišta nástrojů */
  --axl-color-surface-hover: var(--axl-n-50);
  --axl-color-surface-active: var(--axl-n-100);
  --axl-color-surface-selected: var(--axl-p-25);  /* vybraný řádek — světlejší než p-50, aby barevný údaj pásma na něm zůstal čitelný */
  --axl-color-nav: var(--axl-n-900);  /* levá navigace je tmavá v obou motivech */
  --axl-color-nav-hover: var(--axl-n-800);
  --axl-color-nav-active: var(--axl-p-800);
  --axl-color-topbar: var(--axl-n-0);
  /* --- 2.7 Text ------------------------------------------------------------ */
  --axl-color-text: var(--axl-n-900);  /* hlavní obsah, hodnoty */
  --axl-color-text-secondary: var(--axl-n-600);  /* popisky, druhý řádek buňky */
  --axl-color-text-muted: var(--axl-n-500);  /* metadata, chybějící údaj */
  --axl-color-text-nav: var(--axl-n-300);
  --axl-color-text-nav-active: var(--axl-n-0);
  --axl-color-text-link: var(--axl-p-600);
  /* --- 2.8 Linky ----------------------------------------------------------- */
  --axl-color-border: var(--axl-n-200);  /* výchozí */
  --axl-color-border-subtle: var(--axl-n-100);  /* uvnitř husté tabulky */
  --axl-color-border-strong: var(--axl-n-300);  /* oddělení sekcí, zvýrazněná hrana */
  /* Rámeček ovládacího prvku je jediné, čím se pole nebo tiché tlačítko dá najít — WCAG 1.4.11 na něj chce 3:1, ne dekorativní linku. Explicitní hodnota, protože žádný krok neutrální škály tam nepadne přesně. */
  --axl-color-border-control: #8290a6;  /* 3,24:1 na bílé */
  --axl-color-border-nav: var(--axl-n-800);
  /* --- 2.9 Akce ------------------------------------------------------------ */
  --axl-color-action: var(--axl-p-500);
  --axl-color-action-hover: var(--axl-p-600);
  --axl-color-action-active: var(--axl-p-700);
  --axl-color-action-fg: var(--axl-n-0);  /* text na plné akční ploše */
  --axl-color-action-subtle: var(--axl-p-50);  /* sekundární akce, plocha */
  --axl-color-action-subtle-fg: var(--axl-p-700);
  --axl-color-action-border: var(--axl-p-200);
  --axl-color-focus: var(--axl-p-500);
  --axl-focus-width: var(--axl-bw-2);
  --axl-focus-offset: var(--axl-bw-2);
  /* --- 2.10 Stavy --------------------------------------------------------- Barva stav nikdy nenese sama — vždy je s ní ikona nebo text. */
  --axl-color-ok-fg: var(--axl-g-500);
  --axl-color-ok-bg: var(--axl-g-50);
  --axl-color-warn-fg: var(--axl-a-500);
  --axl-color-warn-bg: var(--axl-a-50);
  --axl-color-warn-border: var(--axl-a-200);
  --axl-color-risk-fg: var(--axl-r-500);
  --axl-color-risk-bg: var(--axl-r-50);
  --axl-color-risk-border: var(--axl-r-200);
  --axl-color-info-fg: var(--axl-p-600);
  /* neutrální stav = „údaj tu není“; nikdy neznamená „nevíme proč“ */
  --axl-color-neutral-fg: var(--axl-n-600);
  --axl-color-neutral-bg: var(--axl-n-100);
  --axl-color-neutral-border: var(--axl-n-300);
  /* --- 2.11 Pásma skóre --------------------------------------------------- Doménový pojem, ne obecný stav — proto vlastní jméno. 0–100: 80+ v pořádku · 60–79 ke sledování · pod 60 rizikové. */
  /* Text a značka jsou dvě různé role. Text musí splnit 4,5:1 (drobné písmo), značka 3:1 (grafika) — proto smí být výrazně jasnější. Slévat je do jednoho tokenu znamená stáhnout signál na úroveň, kterou snese nejmenší písmo. */
  --axl-score-ok-fg: #1a7f4e;  /* 5,01:1 na bílé */
  --axl-score-ok-mark: #17a05e;  /* 3,37:1 na bílé */
  --axl-score-watch-fg: #98690d;  /* 4,81:1 na bílé, 4,51:1 na vybraném řádku. Laťku určuje vybraný řádek, ne bílá — proto o 1 % tmavší než primitiv --axl-a-500. Nesjednocovat zpět. */
  --axl-score-watch-mark: #c2700a;  /* 3,74:1 */
  --axl-score-risk-fg: #c44038;  /* 5,08:1 */
  --axl-score-risk-mark: #d4453c;  /* 4,45:1 */
  --axl-score-track: var(--axl-n-200);  /* nevyplněná část ukazatele */
  /* Název pásma nese význam slovem, ne barvou — proto je neutrální. Barevný je jen údaj a značka. */
  --axl-score-band-fg: var(--axl-color-text-secondary);
  /* --- 2.12 Sekvenční škála heatmapy -------------------------------------- Jeden odstín, monotónně klesající světlost. V šedé je pořadí kroků zachované — proto škála funguje i bez barevného vidění. */
  --axl-heat-0: var(--axl-n-100);
  --axl-heat-1: #cdeeed;
  --axl-heat-2: #97dad8;
  --axl-heat-3: #55bebc;
  --axl-heat-4: #1c9a98;
  --axl-heat-5: #0a6d6b;
  --axl-heat-fg-light: var(--axl-n-900);  /* text na krocích 0–2 */
  --axl-heat-fg-dark: var(--axl-n-0);  /* text na krocích 3–5 */
  /* --- 2.13 Grafické série — pořadí je závazné. ---------------------------- */
  --axl-series-1: var(--axl-q-1);
  --axl-series-2: var(--axl-q-2);
  --axl-series-3: var(--axl-q-3);
  --axl-series-4: var(--axl-q-4);
  --axl-series-5: var(--axl-q-5);
  --axl-series-6: var(--axl-q-6);
  /* --- 2.14 Stíny ---------------------------------------------------------- */
  --axl-shadow-sm: 0 1px 2px color-mix(in srgb, var(--axl-n-1000) 8%, transparent);
  --axl-shadow-md: 0 2px 6px color-mix(in srgb, var(--axl-n-1000) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--axl-n-1000) 6%, transparent);
  --axl-shadow-lg: 0 8px 28px color-mix(in srgb, var(--axl-n-1000) 16%, transparent), 0 2px 6px color-mix(in srgb, var(--axl-n-1000) 8%, transparent);
  --axl-shadow-sticky: 0 1px 0 var(--axl-color-border), 0 4px 8px -6px color-mix(in srgb, var(--axl-n-1000) 24%, transparent);
  /* --- 2.15 Vrstvení ------------------------------------------------------- */
  --axl-z-sticky: 5;
  --axl-z-topbar: 20;
  --axl-z-panel: 40;
  --axl-z-popover: 50;
  /* --- 2.16 Pohyb ---------------------------------------------------------- */
  --axl-motion-fast: var(--axl-t-1);
  --axl-motion-slow: var(--axl-t-3);
  /* =========================================================================== 3. KOMPONENTNÍ TOKENY Rozměry, které patří jedné komponentě. Odvozené z vrstev 1–2; barvy necháváme na sémantických tokenech, aby se motiv přepnul sám. ======================================================================== */
  --axl-appshell-nav-w: 244px;
  --axl-appshell-nav-w-collapsed: var(--axl-sp-11);
  --axl-appshell-topbar-h: var(--axl-h-6);
  --axl-appshell-crumbs-h: var(--axl-h-4);
  --axl-appshell-tenant-mark: var(--axl-h-2);
  --axl-kpi-min-w: 216px;
  --axl-kpi-spark-h: var(--axl-sp-9);
  --axl-table-head-h: var(--axl-h-5);
  --axl-table-cell-x: var(--axl-space-sm);
  --axl-table-rule: var(--axl-color-border-subtle);
  --axl-table-avatar: var(--axl-h-1);  /* menší než řádek — jinak dolehne na linku */
  --axl-score-meter-w: var(--axl-sp-10);
  --axl-score-meter-h: var(--axl-sp-3);
  --axl-score-gap: var(--axl-sp-1);
  --axl-heat-cell: var(--axl-sp-7);
  --axl-heat-gap: var(--axl-sp-1);
  --axl-heat-axis-w: var(--axl-sp-12);
  --axl-panel-w: 440px;
  --axl-chart-h: 260px;
  --axl-map-h: 320px;
  --axl-toast-w: 360px;
  --axl-tooltip-max-w: 260px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --axl-color-canvas: var(--axl-n-1000);
    --axl-color-surface: var(--axl-n-900);
    --axl-color-surface-raised: var(--axl-n-850);
    --axl-color-surface-sunken: var(--axl-n-950);
    --axl-color-surface-hover: var(--axl-n-850);
    --axl-color-surface-active: var(--axl-n-800);
    --axl-color-surface-selected: var(--axl-p-900);
    --axl-color-nav: var(--axl-n-950);
    --axl-color-nav-hover: var(--axl-n-850);
    --axl-color-nav-active: var(--axl-p-800);
    --axl-color-topbar: var(--axl-n-900);
    --axl-color-text: var(--axl-n-100);
    --axl-color-text-secondary: var(--axl-n-300);
    --axl-color-text-muted: var(--axl-n-400);
    --axl-color-text-nav: var(--axl-n-300);
    --axl-color-text-nav-active: var(--axl-n-0);
    --axl-color-text-link: var(--axl-p-200);
    --axl-color-border: var(--axl-n-800);
    --axl-color-border-subtle: var(--axl-n-850);
    --axl-color-border-strong: var(--axl-n-700);
    --axl-color-border-control: #64728b;  /* 3,24:1 na tmavé ploše */
    --axl-color-border-nav: var(--axl-n-850);
    --axl-color-action: var(--axl-p-300);
    --axl-color-action-hover: var(--axl-p-200);
    --axl-color-action-active: var(--axl-p-100);
    --axl-color-action-fg: var(--axl-p-900);
    --axl-color-action-subtle: var(--axl-p-800);
    --axl-color-action-subtle-fg: var(--axl-p-100);
    --axl-color-action-border: var(--axl-p-700);
    --axl-color-focus: var(--axl-p-300);
    --axl-color-ok-fg: var(--axl-g-200);
    --axl-color-ok-bg: var(--axl-g-800);
    --axl-color-warn-fg: var(--axl-a-200);
    --axl-color-warn-bg: var(--axl-a-800);
    --axl-color-warn-border: var(--axl-a-600);
    --axl-color-risk-fg: var(--axl-r-200);
    --axl-color-risk-bg: var(--axl-r-800);
    --axl-color-risk-border: var(--axl-r-600);
    --axl-color-info-fg: var(--axl-p-200);
    --axl-color-neutral-fg: var(--axl-n-300);
    --axl-color-neutral-bg: var(--axl-n-800);
    --axl-color-neutral-border: var(--axl-n-700);
    --axl-score-ok-fg: var(--axl-g-200);
    --axl-score-ok-mark: var(--axl-g-300);
    --axl-score-watch-fg: var(--axl-a-200);
    --axl-score-watch-mark: var(--axl-a-300);
    --axl-score-risk-fg: var(--axl-r-200);
    --axl-score-risk-mark: var(--axl-r-300);
    --axl-score-track: var(--axl-n-800);
    --axl-score-band-fg: var(--axl-color-text-secondary);
    --axl-heat-0: var(--axl-n-850);
    --axl-heat-1: #0d3b3a;
    --axl-heat-2: #135c5a;
    --axl-heat-3: #1a807e;
    --axl-heat-4: #2ba6a3;
    --axl-heat-5: #6ed3d0;
    --axl-heat-fg-light: var(--axl-n-100);
    --axl-heat-fg-dark: var(--axl-n-1000);
    --axl-series-1: #5aa9dd;
    --axl-series-2: #f0b13a;
    --axl-series-3: #43c39b;
    --axl-series-4: #e29cc0;
    --axl-series-5: #8fd0f2;
    --axl-series-6: #f08040;
    --axl-shadow-sm: 0 1px 2px color-mix(in srgb, #000000 40%, transparent);
    --axl-shadow-md: 0 2px 6px color-mix(in srgb, #000000 46%, transparent), 0 1px 2px color-mix(in srgb, #000000 30%, transparent);
    --axl-shadow-lg: 0 8px 28px color-mix(in srgb, #000000 56%, transparent), 0 2px 6px color-mix(in srgb, #000000 34%, transparent);
    --axl-shadow-sticky: 0 1px 0 var(--axl-color-border), 0 4px 8px -6px color-mix(in srgb, #000000 70%, transparent);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --axl-color-canvas: var(--axl-n-1000);
  --axl-color-surface: var(--axl-n-900);
  --axl-color-surface-raised: var(--axl-n-850);
  --axl-color-surface-sunken: var(--axl-n-950);
  --axl-color-surface-hover: var(--axl-n-850);
  --axl-color-surface-active: var(--axl-n-800);
  --axl-color-surface-selected: var(--axl-p-900);
  --axl-color-nav: var(--axl-n-950);
  --axl-color-nav-hover: var(--axl-n-850);
  --axl-color-nav-active: var(--axl-p-800);
  --axl-color-topbar: var(--axl-n-900);
  --axl-color-text: var(--axl-n-100);
  --axl-color-text-secondary: var(--axl-n-300);
  --axl-color-text-muted: var(--axl-n-400);
  --axl-color-text-nav: var(--axl-n-300);
  --axl-color-text-nav-active: var(--axl-n-0);
  --axl-color-text-link: var(--axl-p-200);
  --axl-color-border: var(--axl-n-800);
  --axl-color-border-subtle: var(--axl-n-850);
  --axl-color-border-strong: var(--axl-n-700);
  --axl-color-border-control: #64728b;  /* 3,24:1 na tmavé ploše */
  --axl-color-border-nav: var(--axl-n-850);
  --axl-color-action: var(--axl-p-300);
  --axl-color-action-hover: var(--axl-p-200);
  --axl-color-action-active: var(--axl-p-100);
  --axl-color-action-fg: var(--axl-p-900);
  --axl-color-action-subtle: var(--axl-p-800);
  --axl-color-action-subtle-fg: var(--axl-p-100);
  --axl-color-action-border: var(--axl-p-700);
  --axl-color-focus: var(--axl-p-300);
  --axl-color-ok-fg: var(--axl-g-200);
  --axl-color-ok-bg: var(--axl-g-800);
  --axl-color-warn-fg: var(--axl-a-200);
  --axl-color-warn-bg: var(--axl-a-800);
  --axl-color-warn-border: var(--axl-a-600);
  --axl-color-risk-fg: var(--axl-r-200);
  --axl-color-risk-bg: var(--axl-r-800);
  --axl-color-risk-border: var(--axl-r-600);
  --axl-color-info-fg: var(--axl-p-200);
  --axl-color-neutral-fg: var(--axl-n-300);
  --axl-color-neutral-bg: var(--axl-n-800);
  --axl-color-neutral-border: var(--axl-n-700);
  --axl-score-ok-fg: var(--axl-g-200);
  --axl-score-ok-mark: var(--axl-g-300);
  --axl-score-watch-fg: var(--axl-a-200);
  --axl-score-watch-mark: var(--axl-a-300);
  --axl-score-risk-fg: var(--axl-r-200);
  --axl-score-risk-mark: var(--axl-r-300);
  --axl-score-track: var(--axl-n-800);
  --axl-score-band-fg: var(--axl-color-text-secondary);
  --axl-heat-0: var(--axl-n-850);
  --axl-heat-1: #0d3b3a;
  --axl-heat-2: #135c5a;
  --axl-heat-3: #1a807e;
  --axl-heat-4: #2ba6a3;
  --axl-heat-5: #6ed3d0;
  --axl-heat-fg-light: var(--axl-n-100);
  --axl-heat-fg-dark: var(--axl-n-1000);
  --axl-series-1: #5aa9dd;
  --axl-series-2: #f0b13a;
  --axl-series-3: #43c39b;
  --axl-series-4: #e29cc0;
  --axl-series-5: #8fd0f2;
  --axl-series-6: #f08040;
  --axl-shadow-sm: 0 1px 2px color-mix(in srgb, #000000 40%, transparent);
  --axl-shadow-md: 0 2px 6px color-mix(in srgb, #000000 46%, transparent), 0 1px 2px color-mix(in srgb, #000000 30%, transparent);
  --axl-shadow-lg: 0 8px 28px color-mix(in srgb, #000000 56%, transparent), 0 2px 6px color-mix(in srgb, #000000 34%, transparent);
  --axl-shadow-sticky: 0 1px 0 var(--axl-color-border), 0 4px 8px -6px color-mix(in srgb, #000000 70%, transparent);
}