/* ==========================================================================
   green.control — Design tokens v3
   Základ = varianta 1 (Bricolage + JetBrains Mono), větší písmo, bez kurzívy.
   Vrstvy: 1) primitiva (surové hodnoty)  2) sémantika (role)  3) komponenty
   V komponentách používej VŽDY sémantické tokeny, nikdy primitiva.
   ========================================================================== */

:root {
  /* ---------- 1. PRIMITIVA ---------- */

  /* Forest — základní neutrální škála s nádechem zelené */
  --forest-975: #050a07;
  --forest-950: #08100c;
  --forest-900: #0c1611;
  --forest-850: #101d16;
  --forest-800: #14241b;
  --forest-750: #192c22;
  --forest-700: #1f3529;
  --forest-600: #2b4636;
  --forest-500: #3f5e4b;
  --forest-400: #6a8a76;
  --forest-300: #9db3a4;
  --forest-200: #c9d8cd;
  --forest-100: #e6eee7;
  --forest-50:  #f3f6f0;

  /* Lime — značková akcentní barva */
  --lime-300: #e2fbab;
  --lime-400: #d4f78a;
  --lime-500: #c6f36b;
  --lime-600: #a6d64a;
  --lime-700: #6f9a1f;
  --lime-800: #4a6a10;
  --lime-950: #1a2508;

  /* Signální barvy */
  --amber-400: #f6c56f;
  --amber-700: #8a5a0b;
  --coral-400: #ff8f72;
  --coral-700: #a3381d;
  --sky-400:   #86c8ff;
  --sky-700:   #1e5f99;

  /* ---------- Typografie ---------- */
  --font-display: "Bricolage Grotesque", ui-sans-serif, sans-serif;
  --font-body:    "Figtree", ui-sans-serif, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Čitelnost od pultu: běžný text 16 px, nic důležitého pod 13 px */
  --text-2xs: 12px;   /* mono popisky (kapitálky) */
  --text-xs:  13px;   /* metadata, časy */
  --text-sm:  15px;   /* sekundární text */
  --text-base: 16px;  /* běžný text */
  --text-md:  18px;   /* úvod, briefing */
  --text-lg:  21px;   /* název karty */
  --text-xl:  26px;   /* titulek dialogu */
  --text-2xl: 38px;   /* čísla, nadpis stránky */
  --text-3xl: clamp(44px, 5vw, 80px);
  --text-clock: clamp(48px, 4.6vw, 72px);

  --leading-tight: 0.98;
  --leading-snug: 1.25;
  --leading-body: 1.5;

  --tracking-display: -0.035em;
  --tracking-tight: -0.015em;
  --tracking-caps: 0.12em;

  /* ---------- Prostor (4px grid) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Zaoblení ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* ---------- Pohyb ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 560ms;
  --dur-slower: 900ms;
  --stagger: 70ms;

  /* ---------- Vrstvy ---------- */
  --z-base: 1;
  --z-sticky: 20;
  --z-drawer: 60;
  --z-palette: 80;
  --z-toast: 90;

  /* ---------- Layout ---------- */
  --rail-width: 72px;
  --content-max: 100%;
  --gutter: clamp(16px, 2.4vw, 40px);
  --grid-gap: 18px;
}

/* ---------- 2. SÉMANTIKA — tmavý motiv (výchozí) ---------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--forest-950);
  --bg-deep: var(--forest-975);
  --surface: color-mix(in oklab, var(--forest-850) 82%, transparent);
  --surface-2: color-mix(in oklab, var(--forest-900) 88%, transparent);
  --surface-raised: var(--forest-800);
  --surface-hover: color-mix(in oklab, var(--forest-700) 55%, transparent);
  --surface-sunken: color-mix(in oklab, var(--forest-975) 60%, transparent);

  /* Vstupy bez rámečku — pole drží výplň, hrana se objeví až při fokusu */
  --field-bg: color-mix(in oklab, var(--forest-300) 7%, transparent);
  --field-bg-hover: color-mix(in oklab, var(--forest-300) 12%, transparent);
  --field-bg-focus: color-mix(in oklab, var(--forest-975) 55%, transparent);
  --field-bg-disabled: color-mix(in oklab, var(--forest-300) 3%, transparent);
  /* checkbox je malý cíl → o něco sytější výplň než pole */
  --check-bg: color-mix(in oklab, var(--forest-300) 14%, transparent);
  --check-bg-hover: color-mix(in oklab, var(--forest-300) 20%, transparent);

  --border: color-mix(in oklab, var(--forest-300) 11%, transparent);
  --border-strong: color-mix(in oklab, var(--forest-300) 22%, transparent);
  --border-control: #6b8174;          /* hrany vstupů a checkboxů, ≥3:1 */
  --border-accent: color-mix(in oklab, var(--lime-500) 45%, transparent);

  --text: var(--forest-50);
  --text-muted: var(--forest-300);
  --text-faint: #8aa594;              /* ≥4.5:1 na panelu */
  --text-inverse: var(--forest-950);

  --accent: var(--lime-500);
  --accent-hover: var(--lime-400);
  --accent-ink: var(--lime-950);
  --accent-text: var(--lime-500);
  --accent-soft: color-mix(in oklab, var(--lime-500) 14%, transparent);
  --accent-glow: color-mix(in oklab, var(--lime-500) 32%, transparent);

  --warn: var(--amber-400);
  --warn-soft: color-mix(in oklab, var(--amber-400) 14%, transparent);
  --danger: var(--coral-400);
  --danger-soft: color-mix(in oklab, var(--coral-400) 14%, transparent);
  --info: var(--sky-400);
  --info-soft: color-mix(in oklab, var(--sky-400) 14%, transparent);

  --shadow-sm: 0 1px 0 0 color-mix(in oklab, white 4%, transparent) inset, 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 1px 0 0 color-mix(in oklab, white 5%, transparent) inset, 0 12px 32px -12px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 1px 0 0 color-mix(in oklab, white 6%, transparent) inset, 0 40px 80px -24px rgb(0 0 0 / 0.75);

  --aurora-1: color-mix(in oklab, var(--lime-600) 22%, transparent);
  --aurora-2: color-mix(in oklab, #1f6b45 50%, transparent);
  --aurora-3: color-mix(in oklab, #0f3d2c 70%, transparent);
  --grain-opacity: 0.07;
}

/* ---------- 2b. SÉMANTIKA — světlý motiv ---------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f5f7f1;
  --bg-deep: #ebf0e3;
  --surface: color-mix(in oklab, white 86%, transparent);
  --surface-2: color-mix(in oklab, white 72%, transparent);
  --surface-raised: #ffffff;
  --surface-hover: color-mix(in oklab, var(--forest-100) 80%, transparent);
  --surface-sunken: color-mix(in oklab, var(--forest-100) 70%, transparent);

  --field-bg: color-mix(in oklab, var(--forest-900) 6%, transparent);
  --field-bg-hover: color-mix(in oklab, var(--forest-900) 10%, transparent);
  --field-bg-focus: #ffffff;
  --field-bg-disabled: color-mix(in oklab, var(--forest-900) 3%, transparent);
  --check-bg: color-mix(in oklab, var(--forest-900) 11%, transparent);
  --check-bg-hover: color-mix(in oklab, var(--forest-900) 16%, transparent);

  --border: color-mix(in oklab, var(--forest-900) 9%, transparent);
  --border-strong: color-mix(in oklab, var(--forest-900) 18%, transparent);
  --border-control: #70877e;
  --border-accent: color-mix(in oklab, var(--accent) 55%, transparent);

  --text: var(--forest-900);
  --text-muted: var(--forest-500);
  --text-faint: #5a7062;
  --text-inverse: var(--forest-50);

  /* Limetka na světlém pozadí nemá kontrast (1,3 : 1) → výplně jsou sytá listová zelená
     s bílým textem (5,2 : 1), limetka zůstává jako světlý podklad zvýraznění. */
  --accent: #3f7a1c;
  --accent-hover: #356b14;
  --accent-ink: #ffffff;
  --accent-text: #335f12;
  --accent-soft: color-mix(in oklab, var(--lime-500) 34%, transparent);
  --accent-glow: color-mix(in oklab, #3f7a1c 30%, transparent);

  --warn: var(--amber-700);
  --warn-soft: color-mix(in oklab, var(--amber-400) 30%, transparent);
  --danger: var(--coral-700);
  --danger-soft: color-mix(in oklab, var(--coral-400) 22%, transparent);
  --info: var(--sky-700);
  --info-soft: color-mix(in oklab, var(--sky-400) 25%, transparent);

  --shadow-sm: 0 1px 2px rgb(20 36 27 / 0.06);
  --shadow-md: 0 14px 34px -16px rgb(20 36 27 / 0.22);
  --shadow-lg: 0 40px 80px -28px rgb(20 36 27 / 0.3);

  --aurora-1: color-mix(in oklab, var(--lime-400) 32%, transparent);
  --aurora-2: color-mix(in oklab, #cfe6bf 45%, transparent);
  --aurora-3: color-mix(in oklab, #eef4e6 80%, transparent);
  --grain-opacity: 0.05;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
    --stagger: 0ms;
  }
}

/* ---------- Velké monitory (QHD 2560 px) — o stupeň větší písmo ---------- */
@media (min-width: 2200px) {
  :root {
    --text-2xs: 13px;
    --text-xs:  14px;
    --text-sm:  16px;
    --text-base: 17px;
    --text-md:  19px;
    --text-lg:  23px;
    --text-xl:  28px;
    --text-2xl: 42px;
    --grid-gap: 22px;
  }
}