/* SUGENERUOTA scripts/sukurti-tokenus.py iš design/tokens.json — neredaguoti ranka.
   Šviesi tema — :root; vaizdo tema — [data-surface="video"] (tie patys vardai, kitos reikšmės).
   Lūžio taškai (CSS @media, ne kintamieji): 480, 768, 1024, 1280, 1600 px. */
:root {
  /* Bazinė paletė (p.17, p.19) ir išvestiniai mišiniai. Komponentuose — tik semantiniai --color-*. */
  --palette-white: #FFFFFF;
  --palette-warm-white: #F4F1E9;
  --palette-graphite: #24272C;
  --palette-gold: #B89B65;
  --palette-graphite-muted: #54565A;
  --palette-sand-line: #D3D0C8;
  --palette-graphite-60: #7C7D80;
  --palette-gold-hover: #C6AF84;
  --palette-gold-pressed: #A98F5F;
  --palette-surface-hover: #E4E0D8;
  --palette-graphite-hover: #3E4145;
  --palette-graphite-deep: #1B1D21;
  --palette-on-dark-muted: #BDBEC0;
  /* Semantinės spalvos (šviesi tema) */
  --color-bg: #FFFFFF;
  --color-surface: #F4F1E9;
  --color-surface-hover: #E4E0D8;
  --color-text: #24272C;
  --color-text-muted: #54565A;
  --color-border-decor: #D3D0C8;
  --color-border-control: #7C7D80;
  --color-border-strong: #24272C;
  --color-accent: #B89B65;
  --color-accent-hover: #C6AF84;
  --color-accent-pressed: #A98F5F;
  --color-on-accent: #24272C;
  --color-inverse-bg: #24272C;
  --color-inverse-text: #FFFFFF;
  --color-inverse-hover: #3E4145;
  --color-focus: #24272C;
  --color-focus-offset: #FFFFFF;
  --color-scrim: rgba(36,39,44,0.48);
  /* Būsenos: tik ženklui, pranešimams ir pavojingam mygtukui; visada su tekstu ir forma (K-18) */
  --color-ok: #2E6B3A;
  --color-ok-bg: #E9F2EA;
  --color-ok-on-dark: #7BC47F;
  --color-warn: #8A4B00;
  --color-warn-bg: #FBEBD9;
  --color-warn-on-dark: #F2B45A;
  --color-crit: #A32020;
  --color-crit-bg: #F8E5E3;
  --color-crit-on-dark: #FF8A80;
  --color-off: #54565A;
  --color-off-bg: #F4F1E9;
  --color-off-on-dark: #BDBEC0;
  --color-unknown: #54565A;
  --color-unknown-bg: #F4F1E9;
  --color-unknown-on-dark: #BDBEC0;
  --color-pending: #24272C;
  --color-pending-bg: #F4F1E9;
  --color-pending-on-dark: #FFFFFF;
  /* Šriftai (Inter — tik iš savo serverio, §5.4) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* Teksto dydis ir eilutės aukštis */
  --text-xs: 13px;
  --lh-xs: 18px;
  --text-sm: 14px;
  --lh-sm: 20px;
  --text-md: 15px;
  --lh-md: 22px;
  --text-lg: 16px;
  --lh-lg: 24px;
  --text-xl: 18px;
  --lh-xl: 26px;
  --text-2xl: 20px;
  --lh-2xl: 28px;
  --text-3xl: 24px;
  --lh-3xl: 32px;
  --text-4xl: 32px;
  --lh-4xl: 40px;
  --text-5xl: clamp(32px, 4.5vw, 48px);
  --lh-5xl: 1.15;
  /* Tarpai (8 px bazė, p.17) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  /* Kampai (2–6 px, p.19) */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  /* Šešėlis — tik dialogui, lapui, meniu */
  --shadow-overlay: 0 12px 32px rgba(36,39,44,0.18), 0 2px 8px rgba(36,39,44,0.10);
  /* Valdiklių aukštis ir liečiamas tikslas (p.20) */
  --control-h-sm: 32px;
  --control-h: 40px;
  --control-h-lg: 48px;
  --touch-min: 44px;
  /* Išdėstymas */
  --layout-sidebar: 216px;
  --layout-topbar: 64px;
  --layout-topbar-phone: 56px;
  --layout-tabbar: 60px;
  --layout-content-max: 1440px;
  --layout-form-max: 720px;
  --layout-site-max: 1120px;
  --layout-gutter: 16px;
  /* Piktogramos (20×20 tinklelis, 1,75 px linija) */
  --icon: 20px;
  --icon-lg: 24px;
  --icon-stroke: 1.75;
  /* Judesys (p.20) */
  --motion-hover: 120ms;
  --motion-panel: 170ms;
  --motion-dialog: 200ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  /* Sluoksniai (dialogai — naršyklės top layer) */
  --z-sticky: 10;
  --z-chrome: 20;
  --z-tabbar: 30;
  --z-popover: 40;
  --z-toast: 50;
}
@media (min-width: 768px) {
  :root { --layout-gutter: 24px; }
}
@media (min-width: 1280px) {
  :root { --layout-gutter: 32px; }
}
[data-surface="video"] {
  --color-bg: #1B1D21;
  --color-surface: #24272C;
  --color-surface-hover: #3E4145;
  --color-text: #FFFFFF;
  --color-text-muted: #BDBEC0;
  --color-border-decor: #3E4145;
  --color-border-control: #BDBEC0;
  --color-border-strong: #FFFFFF;
  --color-accent: #B89B65;
  --color-accent-hover: #C6AF84;
  --color-accent-pressed: #A98F5F;
  --color-on-accent: #24272C;
  --color-inverse-bg: #FFFFFF;
  --color-inverse-text: #24272C;
  --color-inverse-hover: #F4F1E9;
  --color-focus: #FFFFFF;
  --color-focus-offset: #24272C;
  --color-scrim: rgba(27,29,33,0.72);
  --color-ok: #7BC47F;
  --color-ok-bg: #24272C;
  --color-warn: #F2B45A;
  --color-warn-bg: #24272C;
  --color-crit: #FF8A80;
  --color-crit-bg: #24272C;
  --color-off: #BDBEC0;
  --color-off-bg: #24272C;
  --color-unknown: #BDBEC0;
  --color-unknown-bg: #24272C;
  --color-pending: #FFFFFF;
  --color-pending-bg: #24272C;
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-hover: 0ms; --motion-panel: 0ms; --motion-dialog: 0ms; }
}