/* Katy · masáže — design tokens. GENEROVÁNO z tokens/*.json — needitujte ručně. */
/* Barvy: řetěz Mapped → Alias → Brand přes var(); hex existuje jen v Brand. */
:root {

  /* ===== BRAND — surové barvy (jediné hex) ===== */
  --katy-color-navy-night: #141B2D;  /* Noc — plocha stránky v tmavém režimu. */
  --katy-color-navy-deep: #1F2A44;  /* Hloubka — kotva značky: text, hlavní tlačítko, patička, tmavé bloky. */
  --katy-color-navy-ink: #3A4257;  /* Ztlumený text na světlé ploše. */
  --katy-color-navy-line: #2C3856;  /* Linka v tmavém režimu. */
  --katy-color-navy-mist: #AEB4C2;  /* Ztlumený text v tmavém režimu. */
  --katy-color-gold-leaf: #C9A24D;  /* Zlatá — symbol K, tenké linky, nadpisy a tlačítka na modré. */
  --katy-color-gold-mustard: #8A6310;  /* Hořčice — zlatá čitelná na světlém: odkazy a druhé tlačítko. Ztmavená proti konceptu (#9A6F12 dal pod textem plátna jen 4,26:1, tohle dá 5,12:1). */
  --katy-color-gold-warm: #6F4F0C;  /* Tmavší hořčice pro stav hover — hover jde do tmava, ne do světla. */
  --katy-color-gold-glow: #E3C381;  /* Světlá zlatá pro hover v tmavém režimu — tam jde hover do světla, ne do tmy. */
  --katy-color-rose-dust: #C79C9E;  /* Starorůžová z papíru s rukopisným K. Jen lehce. */
  --katy-color-rose-veil: #E8D3D2;  /* Světlý tón růže — plochy štítků a citací. */
  --katy-color-rose-deep: #A97A7D;  /* Tmavší růže pro obrysy a stav hover. */
  --katy-color-neutral-300: #B9BDC7;  /* Neaktivní prvky a obrysy. */
  --katy-color-neutral-500: #5C6270;  /* Ztlumený text a popisky. */
  --katy-color-neutral-sand: #E8DCC8;  /* Písek — jemné plochy a oddělovače, barva stěny v ateliéru. */
  --katy-color-neutral-cream: #F4EBDD;  /* Krém — pozadí odsazených sekcí. */
  --katy-color-neutral-canvas: #FBF8F3;  /* Plátno — pozadí celého webu. */
  --katy-color-neutral-white: #FFFFFF;  /* Bílá — karty nad plátnem. */
  --katy-color-state-error: #9C3B2E;
  --katy-color-state-error-light: #F7E6E2;
  --katy-color-state-info: #2A5A7A;
  --katy-color-state-info-light: #E4EEF4;

  /* ===== ALIAS — role značky ===== */
  --katy-primary: var(--katy-color-navy-deep);  /* Tmavě modrá je kotva značky — text, hlavní tlačítko, patička. */
  --katy-primary-light: var(--katy-color-navy-ink);
  --katy-primary-lighter: var(--katy-color-navy-mist);
  --katy-primary-dark: var(--katy-color-navy-night);
  --katy-secondary: var(--katy-color-neutral-sand);  /* Písek — jemné plochy a oddělovače. */
  --katy-secondary-dark: var(--katy-color-neutral-cream);
  --katy-accent: var(--katy-color-gold-leaf);  /* Zlatá patří symbolu K a linkám; na světlém pozadí jen dekorativně. */
  --katy-accent-light: var(--katy-color-rose-veil);
  --katy-accent-dark: var(--katy-color-gold-warm);
  --katy-conversion: var(--katy-color-gold-mustard);  /* Hořčice nese odkazy a druhé tlačítko — na plátně splní 4,5:1, čistá zlatá ne. */
  --katy-conversion-dark: var(--katy-color-gold-warm);
  --katy-neutral: var(--katy-color-neutral-500);
  --katy-neutral-light: var(--katy-color-neutral-sand);
  --katy-neutral-lighter: var(--katy-color-neutral-cream);
  --katy-neutral-dark: var(--katy-color-navy-deep);
  --katy-neutral-strong: var(--katy-color-navy-ink);
  --katy-neutral-soft: var(--katy-color-neutral-300);
  --katy-neutral-subtle: var(--katy-color-neutral-canvas);
  --katy-surface: var(--katy-color-neutral-canvas);  /* Plátno — pozadí celého webu. */
  --katy-surface-raised: var(--katy-color-neutral-white);
  --katy-surface-invert: var(--katy-color-navy-deep);
  --katy-on-surface: var(--katy-color-navy-deep);
  --katy-on-invert: var(--katy-color-neutral-canvas);
  --katy-on-invert-muted: var(--katy-color-neutral-sand);
  --katy-success: var(--katy-color-navy-deep);
  --katy-success-light: var(--katy-color-neutral-cream);
  --katy-warning: var(--katy-color-gold-mustard);
  --katy-warning-light: var(--katy-color-rose-veil);
  --katy-error: var(--katy-color-state-error);
  --katy-error-light: var(--katy-color-state-error-light);
  --katy-info: var(--katy-color-state-info);
  --katy-info-light: var(--katy-color-state-info-light);
  --katy-on-tint: var(--katy-color-navy-deep);
  --katy-on-action: var(--katy-color-neutral-canvas);  /* Na modrém tlačítku je plátno, ne bílá — drží teplý tón značky. */
  --katy-on-action-secondary: var(--katy-color-neutral-canvas);

  /* ===== MAPPED — sloty použití (jediná vrstva pro komponenty) ===== */
  --katy-background-page: var(--katy-surface);
  --katy-background-surface: var(--katy-surface-raised);  /* Plocha nad stránkou — karty, tabulky, inputy. */
  --katy-background-subtle: var(--katy-secondary);  /* Jemně podbarvený blok — specifikace, poznámka. */
  --katy-background-section: var(--katy-surface);
  --katy-background-section-dark: var(--katy-surface-invert);  /* Tmavá sekce (hero). */
  --katy-background-chip-primary: var(--katy-secondary);
  --katy-background-chip-secondary: var(--katy-neutral-light);
  --katy-background-chip-conversion: var(--katy-accent-light);
  --katy-background-row-hover: var(--katy-secondary);
  --katy-background-muted: var(--katy-neutral-subtle);  /* Jemná neutrální plocha — pruh v tabulce, podklad bloku bez modrého nádechu (. */
  --katy-background-disabled: var(--katy-neutral-subtle);  /* Výplň vypnutého prvku. */
  --katy-border: var(--katy-neutral-light);
  --katy-border-strong: var(--katy-primary);
  --katy-border-accent: var(--katy-conversion);
  --katy-border-outline: var(--katy-neutral-strong);  /* Výrazný obrys — pole formuláře, tlačítko s obrysem. Výrazný obrys je ztlumená modrá; jemné oddělovače zůstávají na písku. */
  --katy-text-default: var(--katy-on-surface);
  --katy-text-headline: var(--katy-primary-dark);  /* Nadpisy jedou tmavší modrou než běžný text. */
  --katy-text-secondary: var(--katy-primary);
  --katy-text-muted: var(--katy-neutral);  /* Popisky a metadata. Na hořčicovou ani modrou výplň nepatří. */
  --katy-text-reversed: var(--katy-on-invert);
  --katy-text-on-dark: var(--katy-on-invert-muted);  /* Doplňkový text na tmavé sekci. */
  --katy-text-on-chip: var(--katy-primary);  /* Text ve štítku. ODCHYLKA OD WEBU: web sází štítek v Písek (4,38:1 na Foam — pod AA pro drobný text), balíček používá Hloubka (7,03:1). Vizuálně týž modrý štítek, jen o odstín tmavší. */
  --katy-text-accent: var(--katy-conversion);
  --katy-text-link: var(--katy-primary);
  --katy-text-link-hover: var(--katy-conversion);
  --katy-text-placeholder: var(--katy-neutral-soft);  /* Text v prázdném poli. Neutral 300 —. */
  --katy-text-disabled: var(--katy-neutral-soft);  /* Popisek vypnutého prvku. */
  --katy-text-on-tint: var(--katy-on-tint);  /* Tělo alertu a poznámky — tmavý text na světlém tintu, v obou režimech stejně. */
  --katy-icon-default: var(--katy-on-surface);
  --katy-icon-muted: var(--katy-neutral);
  --katy-icon-accent: var(--katy-conversion);
  --katy-icon-on-dark: var(--katy-on-invert);
  --katy-button-default: var(--katy-conversion);  /* Hlavní tlačítko nese hořčicová — jediná akční barva na stránce. Zlatá zůstává symbolu K a linkám. */
  --katy-button-hover: var(--katy-conversion-dark);
  --katy-button-text: var(--katy-on-action);  /* Plátno na hořčicové (5,12:1) ve světlém režimu, noc na zlaté (7,15:1) v tmavém. */
  --katy-button-secondary: var(--katy-primary);
  --katy-button-secondary-text: var(--katy-on-action-secondary);  /* Modré tlačítko v dark zesvětlá na mátovou — štítek na něm musí ztmavnout stejně jako u hořčicového. */
  --katy-button-outline-text: var(--katy-primary);  /* Obrysové tlačítko — popisek. Tišší než sekundární, pro odkaz, který není akcí obrazovky. V tmavém režimu se překlopí na Mátovou spolu s primární rolí. */
  --katy-button-outline-line: var(--katy-primary);  /* Obrysové tlačítko — obrys. Stálý, ne indikace najetí; prstenec patří fokusu. */
  --katy-button-ghost-text: var(--katy-primary);  /* Druhotná akce bez výplně — text s podtrženou linkou. */
  --katy-button-ghost-hover: var(--katy-conversion);
  --katy-button-ghost-line: var(--katy-neutral-light);
  --katy-button-destructive: var(--katy-error);  /* Nevratná akce. Jediné místo, kde se v rozhraní objeví červená. */
  --katy-button-destructive-text: var(--katy-on-invert);
  --katy-card-background: var(--katy-surface-raised);
  --katy-card-border: var(--katy-neutral-light);
  --katy-card-featured-background: var(--katy-surface-invert);  /* Vypíchnutá karta (na webu „Plný kamion“) je tmavě modrá. */
  --katy-card-featured-label: var(--katy-on-invert-muted);
  --katy-card-featured-value: var(--katy-accent);  /* Číslo na tmavé kartě svítí goldem. */
  --katy-card-featured-detail: var(--katy-on-invert);
  --katy-focus: var(--katy-primary-light);  /* Focus ring. Písek je světlejší než hlavní modrá, takže je vidět i na tmavém tlačítku. */
  --katy-state-success: var(--katy-success);
  --katy-state-success-light: var(--katy-success-light);
  --katy-state-warning: var(--katy-warning);
  --katy-state-warning-light: var(--katy-warning-light);
  --katy-state-error: var(--katy-error);
  --katy-state-error-light: var(--katy-error-light);
  --katy-state-info: var(--katy-info);
  --katy-state-info-light: var(--katy-info-light);

  /* ===== TYPOGRAPHY — písma, váhy, škály ===== */
  --katy-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;  /* Fraunces — nadpisy a citáty. Teplý serif s mírně nepravidelnými tvary: osobní, ne zdobný. */
  --katy-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;  /* DM Sans — běžný text a rozhraní. Čisté a dobře čitelné na telefonu. */
  --katy-font-weight-light: 300;  /* Jen velká čísla a tenké mezititulky. */
  --katy-font-weight-regular: 400;
  --katy-font-weight-medium: 500;
  --katy-font-weight-semibold: 600;  /* Tlačítka, štítky, zvýrazněné údaje. */
  --katy-font-weight-bold: 700;  /* Nadpisy. */
  --katy-font-weight-display: var(--katy-font-weight-semibold);  /* Řez nadpisů. DM Sans je variabilní, takže se dá kdykoli posunout na 600 bez výměny souboru. */
  --katy-display-2xl-size: clamp(2rem, 1.4rem + 4vw, 3.2rem);  /* 32→51px — hero (1:1 z webu). */
  --katy-display-xl-size: clamp(1.8rem, 1.35rem + 3.5vw, 2.5rem);  /* 29→40px — nadpis sekce. */
  --katy-display-lg-size: clamp(1.4rem, 1.15rem + 3vw, 2rem);  /* 22→32px — podsekce. */
  --katy-display-md-size: 1.55rem;  /* 25px */
  --katy-display-sm-size: 1.25rem;  /* 20px */
  --katy-display-line-height-tight: 1.15;  /* Jednořádkové hero. */
  --katy-display-line-height: 1.18;  /* Víceřádkový nadpis — česká diakritika potřebuje vzduch. */
  --katy-display-letter-spacing: -0.005em;  /* DM Sans ve velkých stupních mírně stáhnout. */
  --katy-display-transform: none;  /* Nadpisy se NEverzálkují — verzálky nese jen štítek (label.*). */
  --katy-label-size: 0.72rem;  /* 11,5px — nadřazený štítek nad nadpisem, tagy stavů. */
  --katy-label-letter-spacing: 0.12em;  /* Verzálky bez trackingu slepí; web jede 0.09–0.15em, 0.12 je střed. */
  --katy-label-transform: uppercase;
  --katy-label-weight: var(--katy-font-weight-bold);
  --katy-text-xs-size: 0.7rem;  /* 11px — drobné metadata, legal. */
  --katy-text-xs-line-height: 1.4;
  --katy-text-sm-size: 0.82rem;  /* 13px — tabulky, popisky. */
  --katy-text-sm-line-height: 1.5;
  --katy-text-md-size: 0.95rem;  /* 15px — základní text webu i UI. */
  --katy-text-md-line-height: 1.65;  /* Web jede 1.65 — dlouhé odborné odstavce. */
  --katy-text-lg-size: 1.05rem;  /* 17px — lead. */
  --katy-text-lg-line-height: 1.7;
  --katy-text-xl-size: 1.25rem;  /* 20px — perex nad sekcí. */
  --katy-text-xl-line-height: 1.55;
  --katy-text-letter-spacing: 0;  /* Inter netrackovat. */
  --katy-text-heading-letter-spacing: -0.01em;
  --katy-heading-letter-spacing: var(--katy-text-heading-letter-spacing);  /* Zkratka pro nadpisy v UI — ukazuje na typografickou škálu, aby se ladila na jednom místě. */

  /* ===== DIMENSION — spacing, radius, stíny, motion, … ===== */
  --katy-space-0: 0;
  --katy-space-1: 0.25rem;  /* 4px */
  --katy-space-2: 0.5rem;  /* 8px */
  --katy-space-3: 0.75rem;  /* 12px */
  --katy-space-4: 1rem;  /* 16px */
  --katy-space-5: 1.25rem;  /* 20px */
  --katy-space-6: 1.5rem;  /* 24px */
  --katy-space-8: 2rem;  /* 32px */
  --katy-space-10: 2.5rem;  /* 40px */
  --katy-space-12: 3rem;  /* 48px */
  --katy-space-16: 4rem;  /* 64px */
  --katy-space-20: 5rem;  /* 80px */
  --katy-space-24: 6rem;  /* 96px */
  --katy-space-32: 8rem;  /* 128px */
  --katy-space-inline-gap: var(--katy-space-2);  /* ikona ↔ text */
  --katy-space-stack-gap: var(--katy-space-4);  /* prvky ve formuláři/kartě */
  --katy-space-card-padding: var(--katy-space-6);
  --katy-space-section-gap: clamp(3rem, 8vw, 6rem);  /* mezi sekcemi (fluid) */
  --katy-space-container-max: 75rem;  /* 1200px */
  --katy-space-container-pad: clamp(1rem, 4vw, 2rem);
  --katy-radius-xs: 0.125rem;  /* 2px — štítky, checkboxy */
  --katy-radius-s: 0.1875rem;  /* 3px — tlačítka (1:1 z webu) */
  --katy-radius-m: 0.25rem;  /* 4px — karty, inputy */
  --katy-radius-l: 0.375rem;  /* 6px — panely */
  --katy-radius-xl: 0.5rem;  /* 8px — sekční kontejnery */
  --katy-radius-2xl: 0.75rem;  /* 12px — maximum, používat výjimečně */
  --katy-radius-pill: 62.4375rem;  /* 999px — pills, badges */
  --katy-radius-round: 50%;  /* avatary, ikonové kruhy */
  --katy-radius-control-tiny: var(--katy-radius-xs);  /* drobné ovládací prvky (checkbox, malý chip) */
  --katy-radius-control-small: var(--katy-radius-xs);  /* malé ovládací prvky (button small, tag) */
  --katy-radius-control: var(--katy-radius-s);  /* ovládací prvky (button medium/large, input) */
  --katy-radius-container: var(--katy-radius-m);  /* VELIKOSTNÍ KONTEXT: kontejner = o krok výš než ovládací prvek (karty nad tlačítky) */
  --katy-radius-container-large: var(--katy-radius-l);  /* VELIKOSTNÍ KONTEXT: o 2 kroky výš (modal/panel nad ovládacími prvky) */
  --katy-radius-container-section: var(--katy-radius-xl);  /* VELIKOSTNÍ KONTEXT: o 3 kroky výš (hero, sekční kontejnery nad panely) */
  --katy-icon-tiny: 1rem;  /* 16px — inline v textu a v drobném UI (tah 2px je tu už hutný, používat výjimečně) */
  --katy-icon-small: 1.25rem;  /* 20px — v tlačítkách, labelech a metadatech */
  --katy-icon-medium: 1.5rem;  /* 24px — výchozí; nativní grid sady Tabler, tah 2px sedí bez kompromisu */
  --katy-icon-large: 2rem;  /* 32px — USP bloky, prázdné stavy, ikonové kruhy */
  --katy-border-width-s: 1px;
  --katy-border-width-m: 2px;
  --katy-border-width-l: 4px;  /* akcentní pruh */
  --katy-shadow-color: 31 42 68;  /* RGB kanály Hloubky — stíny jsou tónované do modra, ne černé */
  --katy-shadow-xs: 0 1px 2px rgb(var(--katy-shadow-color) / 0.06);
  --katy-shadow-s: 0 1px 3px rgb(var(--katy-shadow-color) / 0.08), 0 1px 2px rgb(var(--katy-shadow-color) / 0.05);
  --katy-shadow-m: 0 4px 8px rgb(var(--katy-shadow-color) / 0.08), 0 2px 4px rgb(var(--katy-shadow-color) / 0.05);
  --katy-shadow-l: 0 12px 24px rgb(var(--katy-shadow-color) / 0.10), 0 4px 8px rgb(var(--katy-shadow-color) / 0.05);
  --katy-shadow-xl: 0 24px 48px rgb(var(--katy-shadow-color) / 0.14);  /* modaly */
  --katy-shadow-focus: 0 0 0 3px rgb(74 124 94 / 0.35);  /* focus ring (Sage, ladí s --katy-focus) */
  --katy-z-base: 0;
  --katy-z-raised: 10;
  --katy-z-dropdown: 1000;
  --katy-z-sticky: 1100;
  --katy-z-overlay: 1300;
  --katy-z-modal: 1400;
  --katy-z-popover: 1500;
  --katy-z-toast: 1700;
  --katy-duration-instant: 100ms;  /* hover feedback */
  --katy-duration-fast: 150ms;  /* tlačítka, inputy */
  --katy-duration-base: 250ms;  /* dropdowny, accordion */
  --katy-duration-slow: 400ms;  /* modaly */
  --katy-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --katy-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --katy-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --katy-transition-interactive: background-color var(--katy-duration-fast) var(--katy-ease-standard), color var(--katy-duration-fast) var(--katy-ease-standard), border-color var(--katy-duration-fast) var(--katy-ease-standard), box-shadow var(--katy-duration-fast) var(--katy-ease-standard);  /* sjednocený přechod pro interaktivní prvky */
  --katy-bp-xs: 30rem;  /* 480px — POZOR: CSS var nefunguje v media queries; použijte literál. Tady pro JS/dokumentaci. */
  --katy-bp-sm: 48rem;  /* 768px */
  --katy-bp-md: 64rem;  /* 1024px */
  --katy-bp-lg: 80rem;  /* 1280px */
  --katy-bp-xl: 96rem;  /* 1536px */
}

/* ===== DARK REŽIM =====
   Přepisuje se jen to, co se opravdu liší — zbytek se překlopí sám, protože
   ukazuje na roli, která se překlopila. Blok je záměrně dvakrát: v media query
   platí systémová preference, samostatný selektor je ruční přepnutí, které
   vyhrává v obou směrech (proto je až za ním a proto ta `:not()` výjimka). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --katy-accent-light: var(--katy-color-rose-dust);
    --katy-conversion: var(--katy-color-gold-leaf);
    --katy-conversion-dark: var(--katy-color-gold-glow);  /* Hover v tmavém režimu jde do světla. */
    --katy-neutral: var(--katy-color-navy-mist);
    --katy-neutral-dark: var(--katy-color-neutral-canvas);
    --katy-neutral-light: var(--katy-color-navy-line);
    --katy-neutral-lighter: var(--katy-color-navy-deep);
    --katy-neutral-soft: var(--katy-color-navy-line);
    --katy-neutral-strong: var(--katy-color-neutral-sand);
    --katy-neutral-subtle: var(--katy-color-navy-deep);
    --katy-on-action: var(--katy-color-navy-night);  /* Na zlatém tlačítku je noc — zlatá je světlá plocha. */
    --katy-on-action-secondary: var(--katy-color-navy-night);
    --katy-on-surface: var(--katy-color-neutral-canvas);
    --katy-primary: var(--katy-color-gold-leaf);  /* V tmavém režimu nese hlavní roli zlatá — modrá je pod ní jako plocha. */
    --katy-primary-dark: var(--katy-color-gold-warm);
    --katy-primary-light: var(--katy-color-neutral-sand);
    --katy-primary-lighter: var(--katy-color-rose-veil);
    --katy-secondary: var(--katy-color-navy-deep);
    --katy-secondary-dark: var(--katy-color-navy-night);
    --katy-success: var(--katy-color-gold-leaf);
    --katy-surface: var(--katy-color-navy-night);
    --katy-surface-raised: var(--katy-color-navy-deep);
    --katy-warning: var(--katy-color-gold-leaf);
    --katy-text-headline: var(--katy-primary);  /* Nadpis v dark nemůže držet tmavou modrou — bere tu, která na tmavém svítí. */
  }
}
:root[data-theme="dark"] {
  --katy-accent-light: var(--katy-color-rose-dust);
  --katy-conversion: var(--katy-color-gold-leaf);
  --katy-conversion-dark: var(--katy-color-gold-glow);  /* Hover v tmavém režimu jde do světla. */
  --katy-neutral: var(--katy-color-navy-mist);
  --katy-neutral-dark: var(--katy-color-neutral-canvas);
  --katy-neutral-light: var(--katy-color-navy-line);
  --katy-neutral-lighter: var(--katy-color-navy-deep);
  --katy-neutral-soft: var(--katy-color-navy-line);
  --katy-neutral-strong: var(--katy-color-neutral-sand);
  --katy-neutral-subtle: var(--katy-color-navy-deep);
  --katy-on-action: var(--katy-color-navy-night);  /* Na zlatém tlačítku je noc — zlatá je světlá plocha. */
  --katy-on-action-secondary: var(--katy-color-navy-night);
  --katy-on-surface: var(--katy-color-neutral-canvas);
  --katy-primary: var(--katy-color-gold-leaf);  /* V tmavém režimu nese hlavní roli zlatá — modrá je pod ní jako plocha. */
  --katy-primary-dark: var(--katy-color-gold-warm);
  --katy-primary-light: var(--katy-color-neutral-sand);
  --katy-primary-lighter: var(--katy-color-rose-veil);
  --katy-secondary: var(--katy-color-navy-deep);
  --katy-secondary-dark: var(--katy-color-navy-night);
  --katy-success: var(--katy-color-gold-leaf);
  --katy-surface: var(--katy-color-navy-night);
  --katy-surface-raised: var(--katy-color-navy-deep);
  --katy-warning: var(--katy-color-gold-leaf);
  --katy-text-headline: var(--katy-primary);  /* Nadpis v dark nemůže držet tmavou modrou — bere tu, která na tmavém svítí. */
}