/* ============================================================
   NESYLAB — Design Tokens v4.0
   Cyber Mint + Electric Indigo on cool OLED black.
   Dark-first · OKLCH source of truth (HEX fallback in comments).

   Ramp roles:
     Neutral — cool blue-black foundation (hue 255), bg/text/borders
     Mint    — PRIMARY brand accent (Cyber Mint, hue 165)
     Indigo  — SECONDARY accent (Electric Indigo, hue 270)
     Success — green status (hue 150)
     Warning — amber status (hue 65)
     Error   — red status (hue 25)

   Direction: 0 = darkest, 900 = lightest (dark-first).
   Legacy ramp names (--void/--lime/--neon/--violet/--amber/--rose/--cyan)
   are aliased at the bottom so existing pages recolor automatically.
   ============================================================ */

:root {
  color-scheme: dark;
  /* ===== NEUTRAL — cool OLED black → white (hue 255) ===== */
  --neutral-0:   #050507;  /* oklch(0.04 0.01 255) — page bg, OLED black */
  --neutral-50:  #0a0b0e;  /* between 0 and 100 — subtle elevation on OLED */
  --neutral-100: #0f1015;  /* oklch(0.12 0.01 255) — surfaces, cards, bento */
  --neutral-200: #1a1c23;  /* oklch(0.16 0.02 255) — elevated, inputs, hover */
  --neutral-300: #2d313f;  /* oklch(0.25 0.02 255) — borders, dividers */
  --neutral-400: #4a5066;  /* oklch(0.40 0.03 255) — disabled, bg icons */
  --neutral-500: #717996;  /* oklch(0.55 0.03 255) — secondary text, meta */
  --neutral-600: #9da5bf;  /* oklch(0.70 0.02 255) — body text (dark theme) */
  --neutral-700: #cbd2e6;  /* oklch(0.82 0.02 255) — emphasised text */
  --neutral-800: #eef1f8;  /* oklch(0.93 0.01 255) — headings */
  --neutral-900: #ffffff;  /* oklch(1.00 0 0)       — pure white, micro-accents */

  /* ===== CYBER MINT — primary brand (hue 165) ===== */
  --mint-0:   #010a08;  /* oklch(0.06 0.02 165) */
  --mint-50:  #061a16;  /* between 0 and 100 */
  --mint-100: #0a2924;  /* oklch(0.18 0.06 165) — mint badge bg / subtle cards */
  --mint-200: #09453b;  /* oklch(0.32 0.10 165) — dark hover on mint */
  --mint-300: #0d5e4f;  /* oklch(0.45 0.15 165) — active borders */
  --mint-400: #00b093;  /* oklch(0.65 0.20 165) — secondary mint button */
  --mint-500: #00e5bc;  /* oklch(0.82 0.23 165) — ★ MAIN ACCENT */
  --mint-600: #33ebca;  /* oklch(0.86 0.20 165) — hover on main buttons */
  --mint-700: #66eed5;  /* oklch(0.90 0.15 165) — bright chart highlights */
  --mint-800: #99f1e1;  /* oklch(0.94 0.10 165) — text inside dark mint */
  --mint-900: #ccfaf1;  /* oklch(0.97 0.05 165) — near-white mint detail */

  /* ===== ELECTRIC INDIGO — secondary accent (hue 270) ===== */
  --indigo-0:   #04040d;  /* oklch(0.05 0.02 270) */
  --indigo-50:  #0c0b24;  /* between 0 and 100 */
  --indigo-100: #13123a;  /* oklch(0.15 0.08 270) — subtle indigo surface */
  --indigo-200: #1c1c69;  /* oklch(0.24 0.13 270) — dark hover */
  --indigo-300: #342da2;  /* oklch(0.35 0.18 270) — input focus border */
  --indigo-400: #4a45cb;  /* oklch(0.48 0.22 270) — analytics/premium icons */
  --indigo-500: #635bff;  /* oklch(0.58 0.26 270) — ★ PREMIUM ACCENT */
  --indigo-600: #7b71ff;  /* oklch(0.68 0.22 270) — link/active hover */
  --indigo-700: #958fff;  /* oklch(0.78 0.17 270) — text on dark indigo */
  --indigo-800: #aeaaff;  /* oklch(0.88 0.11 270) — decorative brand */
  --indigo-900: #c9c5ff;  /* oklch(0.95 0.05 270) — high-readability indigo */

  /* ===== FUNCTIONAL — status (full 11-stop ramps, distinct hues) =====
     Each ramp keeps its own hue down into the darkest steps, so on the
     dark theme success/warning/error are clearly distinguishable (no more
     near-identical muddy darks). 0 darkest → 900 lightest tint.
     ★ 500 = main status color. */
  /* Success — green (hue 158) */
  --success-0:   #001508;
  --success-50:  #002210;
  --success-100: #003019;
  --success-200: #004427;
  --success-300: #00633b;
  --success-400: #008e58;
  --success-500: #24ba78;  /* ★ icon / badge / on-success */
  --success-600: #61d196;
  --success-700: #91e3b4;
  --success-800: #bbf0d0;
  --success-900: #defce9;  /* text inside dark notice */
  /* Warning — amber (hue 75) */
  --warning-0:   #201301;
  --warning-50:  #2f1e02;
  --warning-100: #402800;
  --warning-200: #5b3b00;
  --warning-300: #865900;
  --warning-400: #bf8100;
  --warning-500: #f0a726;  /* ★ */
  --warning-600: #ffbd58;
  --warning-700: #ffd395;
  --warning-800: #ffe3be;
  --warning-900: #fff3e4;
  /* Error — red (hue 27) */
  --error-0:   #240302;
  --error-50:  #370404;
  --error-100: #4c0707;
  --error-200: #6c090c;
  --error-300: #9b1014;
  --error-400: #ce2324;
  --error-500: #f14a43;  /* ★ */
  --error-600: #ff7266;
  --error-700: #ffa096;
  --error-800: #ffc8c1;
  --error-900: #ffebe8;

  --white: #FFFFFF;
  --black: #000000;

  /* ===== BRAND GRADIENT (2026 signature) ===== */
  --gradient-brand: linear-gradient(135deg, var(--mint-500) 0%, var(--indigo-500) 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(0,229,188,0.16) 0%, rgba(99,91,255,0.16) 100%);

  /* ===== SEMANTIC — DARK (DEFAULT) =====
     Surface elevation ladder. Each step is ~8 perceived-luminance apart so
     sunken wells, the base canvas, cards and popovers are clearly distinct
     even on OLED-black. (Earlier sunken sat only 3 lum below bg → invisible,
     and raised aliased to elevated → identical. Both fixed.)
       sunken   ~3   wells, insets, nav gutter   (recedes)
       bg       ~9   base canvas
       elevated ~18  cards, panels, sheets
       raised   ~27  menus/popovers above cards   (was = elevated)            */
  --bg-sunken:     #030305;   /* deepest — wells / nav gutter */
  --bg:            #08090c;   /* base canvas (lifted off pure black for room) */
  --bg-elevated:   #111319;   /* cards / panels */
  --bg-raised:     #191c24;   /* menus / popovers (distinct from elevated) */
  --bg-overlay:    rgba(0, 0, 0, 0.78);

  --fg:            var(--neutral-800);   /* #eef1f8 — headings/primary text */
  --fg-muted:      var(--neutral-600);   /* #9da5bf — body/secondary (was 500, too dim) */
  --fg-subtle:     var(--neutral-500);   /* #717996 — meta/captions (was 400, unreadable) */

  --border:        var(--neutral-300);
  --border-strong: #3a3f52;
  --border-focus:  var(--mint-500);

  --primary:          var(--mint-500);
  --primary-hover:    var(--mint-600);
  --primary-fg:       var(--neutral-0);   /* dark text on mint */
  --primary-soft:     rgba(0, 229, 188, 0.14);
  --primary-bright:   var(--mint-500);
  --primary-bright-fg:var(--neutral-0);

  --accent:        var(--indigo-500);
  --accent-soft:   rgba(99, 91, 255, 0.18);
  --accent-fg:     var(--neutral-900);

  --warning:       var(--warning-500);
  --warning-soft:  rgba(240, 167, 38, 0.16);

  --danger:        var(--error-500);
  --danger-soft:   rgba(241, 74, 67, 0.16);

  --success:       var(--success-500);
  --success-soft:  rgba(36, 186, 120, 0.16);
  --info:          var(--indigo-500);
  --info-soft:     rgba(99, 91, 255, 0.16);

  /* text highlight (<mark>) — brand mint tint, normal text.
     Cool-palette aligned; completely separate hue from warning amber. */
  --highlight:     rgba(0, 229, 188, 0.22);
  --highlight-fg:  var(--fg);
  --highlight-soft: rgba(0, 229, 188, 0.12);

  --tint-1: rgba(255, 255, 255, 0.03);
  --tint-2: rgba(255, 255, 255, 0.06);
  --tint-3: rgba(255, 255, 255, 0.10);
  --shadow-ring: 0 0 0 var(--ring-w, 4px) rgba(0, 229, 188, 0.30);

  /* ============================================================
     DATAVIZ — palettes for charts & graphs.
     Series colours stay CONSTANT across light/dark so a data
     identity never changes meaning. Chrome (grid/axis/track)
     is theme-aware via existing semantic tokens.
     ============================================================ */
  /* Categorical · 8 series. Hue + luminance spread so they stay
     distinct in greyscale and for the common colour-blind types.
     Use IN ORDER — the first 4 are the most distinguishable;
     reach for 5–8 only when a chart truly needs >4 series. */
  --viz-1: #12c2a0;   /* teal-mint  (brand-aligned) */
  --viz-2: #6e66ff;   /* indigo     (brand-aligned) */
  --viz-3: #f0a726;   /* amber */
  --viz-4: #ef5350;   /* red */
  --viz-5: #9575ff;   /* violet */
  --viz-6: #29b6d8;   /* cyan */
  --viz-7: #ec6cab;   /* pink */
  --viz-8: #8bc220;   /* lime */

  /* Sequential · single-hue ramps, low → high (5 stops).
     For heatmaps, choropleths, density — one perceptual direction. */
  --seq-mint-1: #0a2924;
  --seq-mint-2: #0d5e4f;
  --seq-mint-3: #00b093;
  --seq-mint-4: #00e5bc;
  --seq-mint-5: #99f1e1;
  --seq-indigo-1: #1a1a4d;
  --seq-indigo-2: #3b35a8;
  --seq-indigo-3: #635bff;
  --seq-indigo-4: #9d97ff;
  --seq-indigo-5: #d8d5ff;

  /* Diverging · indigo ↔ neutral ↔ amber (7 stops).
     Blue–orange is the safest diverging pair for colour-blindness —
     use for deviations around a midpoint (±, above/below target).
     For semantic profit/loss prefer --success / --danger directly. */
  --div-1: #4a45cb;
  --div-2: #6e66ff;
  --div-3: #b3aeff;
  --div-4: #8a8f9e;   /* neutral midpoint */
  --div-5: #f7cf8f;
  --div-6: #f0a726;
  --div-7: #c47f12;

  /* Chart chrome (theme-aware) */
  --viz-grid:  var(--border);
  --viz-axis:  var(--fg-subtle);
  --viz-track: var(--bg-sunken);
  --viz-label: var(--fg-muted);

  /* ===== TYPOGRAPHY ===== */
  --font-display: "Geist", "Inter Tight", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Geist Mono", ui-monospace, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  3.75rem;
  --text-6xl:  4.5rem;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.16em;

  /* ===== SPACING ===== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ===== RADII ===== */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.46), 0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.30);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.62);
  --shadow-glow: 0 0 32px rgba(0, 229, 188, 0.30), 0 0 8px rgba(0, 229, 188, 0.40);
  --shadow-glow-indigo: 0 0 32px rgba(99, 91, 255, 0.34), 0 0 8px rgba(99, 91, 255, 0.40);

  /* ===== MOTION ===== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ===== LAYOUT ===== */
  --container: 1240px;
  --gutter:    24px;

  /* ===== ELEVATION & Z-INDEX =====
     Named stacking layers — never hardcode raw z-index, use these so
     overlays always nest in the right order. Generous gaps leave room
     for one-off intermediate layers. */
  --z-hide:     -1;     /* push behind (decorative) */
  --z-base:      0;     /* default flow */
  --z-raised:   10;     /* cards lifting on hover, focused rows */
  --z-sticky:  100;     /* sticky topbar / table header */
  --z-scrim:   200;     /* dimming backdrop behind drawer/modal */
  --z-drawer:  300;     /* side sheet / mobile nav */
  --z-modal:   400;     /* dialogs, centered sheets */
  --z-popover: 500;     /* dropdowns, menus, comboboxes */
  --z-toast:   600;     /* transient notifications */
  --z-tooltip: 700;     /* tooltips — always on top */
  --z-max:    9999;     /* escape hatch */

  /* Elevation = surface shadow steps (map to shadow scale). */
  --elevation-0: none;
  --elevation-1: var(--shadow-sm);   /* resting cards, inputs */
  --elevation-2: var(--shadow-md);   /* dropdowns, raised cards */
  --elevation-3: var(--shadow-lg);   /* popovers, drawers */
  --elevation-4: var(--shadow-xl);   /* modals, command palette */

  /* ============================================================
     LEGACY ALIASES — old ramp names → new palette.
     Lets every existing page recolor without per-file edits.
     Mapped by visual lightness + role (note the direction flip:
     old void/lime/violet went light→dark, new ramps go dark→light).
     ============================================================ */

  /* void (old: 0=white … 900=black) → neutral (0=black … 900=white) */
  --void-0:   var(--neutral-900);
  --void-50:  var(--neutral-800);
  --void-100: var(--neutral-800);
  --void-200: var(--neutral-700);
  --void-300: var(--neutral-600);
  --void-400: var(--neutral-500);
  --void-500: var(--neutral-400);
  --void-600: var(--neutral-300);
  --void-700: var(--neutral-200);
  --void-800: var(--neutral-100);
  --void-900: var(--neutral-0);
  --void-950: var(--neutral-0);

  /* lime / neon (primary) → mint */
  --lime-0:   var(--mint-900);
  --lime-100: var(--mint-800);
  --lime-200: var(--mint-700);
  --lime-300: var(--mint-600);
  --lime-400: var(--mint-500);   /* old brand → new brand */
  --lime-500: var(--mint-500);
  --lime-600: var(--mint-400);
  --lime-700: var(--mint-300);
  --lime-800: var(--mint-200);
  --lime-900: var(--mint-100);
  --neon-50:  var(--mint-900);
  --neon-100: var(--mint-800);
  --neon-200: var(--mint-700);
  --neon-300: var(--mint-600);
  --neon-400: var(--mint-500);
  --neon-500: var(--mint-500);
  --neon-600: var(--mint-400);
  --neon-700: var(--mint-300);
  --neon-800: var(--mint-200);
  --neon-900: var(--mint-100);

  /* violet (accent) → indigo */
  --violet-0:   var(--indigo-900);
  --violet-100: var(--indigo-800);
  --violet-200: var(--indigo-800);
  --violet-300: var(--indigo-700);
  --violet-400: var(--indigo-600);
  --violet-500: var(--indigo-500);   /* accent → accent */
  --violet-600: var(--indigo-400);
  --violet-700: var(--indigo-300);
  --violet-800: var(--indigo-200);
  --violet-900: var(--indigo-100);

  /* amber → warning ramp (now full 11-stop) */
  --amber-0:   var(--warning-900);
  --amber-100: var(--warning-800);
  --amber-200: var(--warning-700);
  --amber-300: var(--warning-600);
  --amber-400: var(--warning-500);
  --amber-500: var(--warning-500);
  --amber-600: var(--warning-400);
  --amber-700: var(--warning-300);
  --amber-800: var(--warning-200);
  --amber-900: var(--warning-100);

  /* rose → error ramp (now full 11-stop) */
  --rose-0:   var(--error-900);
  --rose-100: var(--error-800);
  --rose-200: var(--error-700);
  --rose-300: var(--error-600);
  --rose-400: var(--error-500);
  --rose-500: var(--error-500);
  --rose-600: var(--error-400);
  --rose-700: var(--error-300);
  --rose-800: var(--error-200);
  --rose-900: var(--error-100);

  /* cyan (info) → indigo family (info = premium blue per brief) */
  --cyan-0:   var(--indigo-900);
  --cyan-100: var(--indigo-800);
  --cyan-200: var(--indigo-700);
  --cyan-300: var(--indigo-700);
  --cyan-400: var(--indigo-500);
  --cyan-500: var(--indigo-500);
  --cyan-600: var(--indigo-400);
  --cyan-700: var(--indigo-300);
  --cyan-800: var(--indigo-200);
  --cyan-900: var(--indigo-100);
}

/* ============================================================
   LIGHT THEME — cool near-white; brand swaps to Indigo primary
   (mint is too light to read on white, so indigo leads in light)
   ============================================================ */
[data-theme="light"] {
  color-scheme: light;
  --bg:            var(--neutral-800);   /* #eef1f8 cool near-white */
  --bg-elevated:   var(--neutral-900);   /* #ffffff */
  --bg-sunken:     #e2e7f2;
  --bg-raised:     #ffffff;              /* same as elevated; sells lift via shadow */
  --bg-overlay:    rgba(5, 5, 7, 0.50);

  --fg:            var(--neutral-100);   /* near-black ink */
  --fg-muted:      var(--neutral-400);
  --fg-subtle:     #5a6280;   /* AA ~5.2:1 na svetli podlagi (neutral-500 je bil 3.7:1 — pod AA) */

  --border:        #d6dcec;
  --border-strong: #bcc4da;
  --border-focus:  var(--indigo-500);

  --primary:          var(--indigo-500);  /* indigo leads in light */
  --primary-hover:    var(--indigo-400);
  --primary-fg:       var(--white);
  --primary-soft:     rgba(99, 91, 255, 0.12);
  --primary-bright:   var(--indigo-500);
  --primary-bright-fg:var(--white);

  --accent:        #008c74;               /* deepened mint, readable on white */
  --accent-soft:   rgba(0, 140, 116, 0.12);
  --accent-fg:     var(--white);

  --warning:       var(--warning-300);   /* #865900 dark amber, readable on white */
  --warning-soft:  rgba(240, 167, 38, 0.14);

  --danger:        var(--error-400);      /* #ce2324 */
  --danger-soft:   rgba(241, 74, 67, 0.12);

  --success:       var(--success-300);    /* #00633b */
  --success-soft:  rgba(36, 186, 120, 0.14);
  --info:          var(--indigo-500);
  --info-soft:     rgba(99, 91, 255, 0.10);

  --highlight:     rgba(0, 176, 147, 0.20);
  --highlight-fg:  var(--fg);
  --highlight-soft: rgba(0, 176, 147, 0.12);

  --tint-1: rgba(5, 5, 7, 0.03);
  --tint-2: rgba(5, 5, 7, 0.06);
  --tint-3: rgba(5, 5, 7, 0.10);
  --shadow-ring: 0 0 0 var(--ring-w, 4px) rgba(99, 91, 255, 0.20);

  --shadow-xs: 0 1px 2px rgba(20, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(20, 24, 40, 0.08), 0 1px 2px rgba(20, 24, 40, 0.05);
  --shadow-md: 0 4px 12px rgba(20, 24, 40, 0.09), 0 2px 4px rgba(20, 24, 40, 0.05);
  --shadow-lg: 0 12px 32px rgba(20, 24, 40, 0.12), 0 4px 8px rgba(20, 24, 40, 0.05);
  --shadow-xl: 0 24px 64px rgba(20, 24, 40, 0.16);
  --shadow-glow: 0 8px 30px rgba(99, 91, 255, 0.18);
  --shadow-glow-indigo: 0 8px 30px rgba(99, 91, 255, 0.22);

  /* legacy aliases that hardcoded dark-on-light expectations */
  --void-50:  #f4f6fb;
  --void-100: #eef1f8;
}

/* System preference fallback (no explicit data-theme) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg:            var(--neutral-800);
    --bg-elevated:   var(--neutral-900);
    --bg-sunken:     #e2e7f2;
    --bg-raised:     #ffffff;
    --fg:            var(--neutral-100);
    --fg-muted:      var(--neutral-400);
    --fg-subtle:     #5a6280;   /* AA ~5.2:1 na svetli podlagi */
    --border:        #d6dcec;
    --border-strong: #bcc4da;
    --border-focus:  var(--indigo-500);
    --shadow-ring:   0 0 0 var(--ring-w, 4px) rgba(99, 91, 255, 0.20);  /* uskladi focus obroč z light temo (prej je ostal mint) */
    --primary:          var(--indigo-500);
    --primary-hover:    var(--indigo-400);
    --primary-fg:       var(--white);
    --primary-soft:     rgba(99, 91, 255, 0.12);
    --primary-bright:   var(--indigo-500);
    --primary-bright-fg:var(--white);
    --accent:        #008c74;
    --accent-soft:   rgba(0, 140, 116, 0.12);
    --warning:       var(--warning-300);
    --warning-soft:  rgba(240, 167, 38, 0.14);
    --danger:        var(--error-400);
    --success:       var(--success-300);
    --info:          var(--indigo-500);
    --tint-1: rgba(5, 5, 7, 0.03);
    --tint-2: rgba(5, 5, 7, 0.06);
    --tint-3: rgba(5, 5, 7, 0.10);
  }
}

/* ============================================================
   EXTENDED TOKENS v4.1
   Adds primitives the system lacked (weights, fluid type,
   layout, breakpoints, density/radius modes) + compatibility
   semantic aliases. No colors duplicated — all map to v4 palette.
   ============================================================ */
:root {
  /* ---- Font weights ---- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-display:  800;

  /* ---- Named UI font sizes (fixed, for dense UI) ---- */
  --fs-display: 48px;
  --fs-h1:      36px;
  --fs-h2:      28px;
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-body-lg: 16px;
  --fs-body:    14px;
  --fs-body-sm: 13px;
  --fs-caption: 12px;
  --fs-micro:   11px;

  /* ---- Fluid type (hero / marketing — clamp min→max) ---- */
  --fs-fluid-display: clamp(2rem, 1.3rem + 3.4vw, 3.5rem);    /* 32→56 */
  --fs-fluid-h1:      clamp(1.625rem, 1.2rem + 2.0vw, 2.5rem);/* 26→40 */
  --fs-fluid-h2:      clamp(1.25rem, 1.0rem + 1.2vw, 1.75rem);/* 20→28 */
  --fs-fluid-h3:      clamp(1.125rem, 1.0rem + 0.6vw, 1.375rem);/* 18→22 */
  --fs-fluid-lede:    clamp(0.9375rem, 0.85rem + 0.45vw, 1.125rem);/* 15→18 */

  /* ---- Line-height + tracking aliases ---- */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-normal:1.5;
  --lh-loose: 1.65;
  --tracking-caps: 0.08em;

  /* ---- Density-aware page padding ---- */
  --space-page-x: clamp(16px, 3vw, 48px);
  --space-page-y: clamp(24px, 4vw, 64px);

  /* ---- Layout ---- */
  --sidebar-w:    280px;
  --topbar-h:     64px;
  --maxw-content: 1200px;

  /* ---- Breakpoint + container reference values ---- */
  --bp-xs:   360px;
  --bp-sm:   480px;
  --bp-md:   768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl:1440px;

  /* ---- Touch target ---- */
  --control-h-touch: 48px;

  /* ---- Compatibility semantic aliases (theme-aware via existing vars) ---- */
  --bg-app:        var(--bg);
  --bg-surface:    var(--bg-elevated);
  --bg-nav:        var(--bg-sunken);
  --bg-brand:      var(--primary);
  --fg-default:    var(--fg);
  --fg-disabled:   var(--fg-subtle);
  --fg-inverse:    var(--primary-fg);
  --fg-link:       var(--accent);
  --fg-brand:      var(--primary);
  --border-subtle:  var(--border);
  --border-default: var(--border-strong);
  --shadow-focus:       var(--shadow-ring);
  --shadow-focus-error: 0 0 0 4px var(--danger-soft);

  /* ---- Status ramps (named, mapped to v4 palette) ---- */
  --color-info-50:     var(--info-soft);
  --color-info-500:    var(--info);
  --color-info-600:    var(--indigo-600);
  --color-info-700:    var(--indigo-400);
  --color-success-50:  var(--success-soft);
  --color-success-100: var(--success-100);
  --color-success-500: var(--success);
  --color-success-600: var(--success-400);
  --color-success-700: var(--success-300);
  --color-warning-50:  var(--warning-soft);
  --color-warning-100: var(--warning-100);
  --color-warning-500: var(--warning);
  --color-warning-600: var(--warning-400);
  --color-warning-700: var(--warning-300);
  --color-error-50:    var(--danger-soft);
  --color-error-100:   var(--error-100);
  --color-error-500:   var(--danger);
  --color-error-600:   var(--error-400);
  --color-error-700:   var(--error-300);
}

/* ============================================================
   COMPONENT TOKENS v4.6 — TRETJI SLOJ (primitiv → semantični → KOMPONENTNI).
   Ti tokeni kažejo na SEMANTIČNE vloge, zato so samodejno theme-aware
   (delujejo v dark in light brez podvajanja). Namen 3-slojne arhitekture:
   videz ene komponente lahko uglasiš, ne da bi se dotaknil globalnih vlog
   ali drugih komponent.
     primitiv     --mint-500            (surova lestvica)
     semantični   --primary             (vloga)
     KOMPONENTNI  --btn-primary-bg      (ta sloj → referenca vloge)
   Ožičeno v živo (css/components.css): .btn, .input/.textarea/.select,
   kartice (--card-*), .badge, .tabs, .modal-mock (--modal-*), .popover.
   Vzorec za nove komponente: dodaj --komponenta-* tokene tukaj in veži CSS
   nanje (nikoli surov HEX/px ali semantična vloga neposredno v komponenti).
   ============================================================ */
:root {
  /* ---- Button ---- */
  --btn-radius:           var(--radius-sm);
  --btn-pad-y:            10px;
  --btn-pad-x:            16px;
  --btn-primary-bg:       var(--primary);
  --btn-primary-bg-hover: var(--primary-hover);
  --btn-primary-fg:       var(--primary-fg);
  --btn-secondary-bg:     var(--bg-sunken);
  --btn-secondary-fg:     var(--fg);
  --btn-ghost-fg:         var(--fg);

  /* ---- Input / polje ---- */
  --input-bg:             var(--bg-elevated);
  --input-fg:             var(--fg);
  --input-border:         var(--border-strong);
  --input-border-focus:   var(--primary);
  --input-radius:         var(--radius-sm);
  --input-placeholder:    var(--fg-subtle);
  --input-pad-y:          10px;   /* density-aware (glej [data-density]) */
  --input-pad-x:          14px;

  /* ---- Card / površina ---- */
  --card-bg:              var(--bg-elevated);
  --card-border:          var(--border);
  --card-radius:          var(--radius-lg);
  --card-shadow:          var(--shadow-sm);

  /* ---- Overlay / popover ---- */
  --overlay-scrim:        var(--bg-overlay, rgba(0, 0, 0, 0.6));
  --popover-bg:           var(--bg-elevated);
  --popover-shadow:       var(--shadow-lg);

  /* ---- Modal / dialog (surface) ---- */
  --modal-bg:             var(--bg-elevated);
  --modal-border:         var(--border);
  --modal-radius:         var(--radius-xl);
  --modal-shadow:         var(--shadow-xl);
  --modal-scrim:          var(--overlay-scrim);

  /* ---- Tabs ---- */
  --tab-fg:               var(--fg-muted);
  --tab-fg-active:        var(--fg);
  --tab-indicator:        var(--primary);
  --tab-border:           var(--border);

  /* ---- Badge ---- (struktura + statusne bg/fg dvojice po vlogah) */
  --badge-radius:         999px;
  --badge-pad-y:          4px;
  --badge-pad-x:          10px;
  --badge-success-bg:     var(--primary-soft);   --badge-success-fg: var(--primary);
  --badge-info-bg:        var(--info-soft);       --badge-info-fg:    var(--info);
  --badge-warn-bg:        var(--warning-soft);    --badge-warn-fg:    var(--warning);
  --badge-danger-bg:      var(--danger-soft);     --badge-danger-fg:  var(--danger);
  --badge-neutral-bg:     var(--tint-2);          --badge-neutral-fg: var(--fg-muted);
  --badge-solid-bg:       var(--primary);         --badge-solid-fg:   var(--primary-fg);
}

/* ============================================================
   PRIMITIVE GEOMETRY & EFFECT TOKENS v4.10
   Doslej trdo kodirane vrednosti (debelina obrob, blur, opacity,
   velikosti ikon, geometrija focus obroča, measure) zdaj kot tokeni —
   da zlato pravilo „brez surovih vrednosti" velja tudi zanje.
   Theme-agnostični primitivi (delujejo enako v dark/light).
   Vzorec uvedbe je inkrementalen (kot komponentni sloj): ožiči po potrebi,
   nova koda naj jih uporablja namesto surovih px.
   ============================================================ */
:root {
  /* ---- Border widths ---- */
  --border-width-1: 1px;   /* hairline — privzeta obroba */
  --border-width-2: 2px;   /* poudarek / aktivna obroba / kljukice */

  /* ---- Focus ring geometry (barva ostane v --shadow-ring) ---- */
  --ring-w:       4px;     /* debelina focus obroča */
  --ring-offset:  2px;     /* za outline-offset, kjer je potrebno */

  /* ---- Blur (glass / backdrop) ---- */
  --blur-sm: 4px;    /* drobne steklene plošče (kartice, oznake) */
  --blur-md: 10px;   /* lepljive vrstice (inspektor) */
  --blur-lg: 12px;   /* topbar / app chrome */

  /* ---- Opacity roles ---- */
  --opacity-disabled: 0.4;   /* onemogočene kontrole */
  --opacity-muted:    0.6;   /* zatemnjeno, a aktivno */

  /* ---- Icon sizes (uskladi z width/height na <svg>) ---- */
  --icon-xs: 16px;
  --icon-sm: 20px;
  --icon-md: 24px;   /* ★ privzeta UI ikona */
  --icon-lg: 32px;
  --icon-xl: 48px;

  /* ---- Measure — optimalna dolžina vrstice za branje ---- */
  --measure: 72ch;
}

/* ============================================================
   WIDE-GAMUT (Display-P3) — 2026 progressive enhancement.
   Na zaslonih s P3 gamutom brand barvi zažarita bolj živo;
   na sRGB zaslonih (in starih brskalnikih) se @supports ne
   sproži in ostane HEX vrednost. Spreminjamo le SIDRO lestvice
   (--mint-500 / --indigo-500); semantične vloge in gradient,
   ki kažejo nanju, sledijo samodejno.
   ============================================================ */
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --mint-500:   color(display-p3 0.0 0.886 0.737);  /* Cyber Mint, P3 */
    --indigo-500: color(display-p3 0.388 0.357 1.0);  /* Electric Indigo, P3 */
  }
}

/* ============================================================
   DENSITY MODES — set data-density on <html> or a container
   ============================================================ */
[data-density="compact"] {
  --row-h:     32px;
  --control-h: 32px;
  --pad-x:     10px;
  --pad-y:     6px;
  /* ožiči density v komponentni sloj → .btn / .input se dejansko skrčijo */
  --btn-pad-y: 6px;  --btn-pad-x: 12px;
  --input-pad-y: 6px; --input-pad-x: 11px;
}
[data-density="comfortable"] {
  --row-h:     44px;
  --control-h: 40px;
  --pad-x:     14px;
  --pad-y:     10px;
  --btn-pad-y: 12px; --btn-pad-x: 18px;
  --input-pad-y: 12px; --input-pad-x: 16px;
}

/* ============================================================
   RADIUS SCALE MODES — set data-radius on <html> to retune
   ============================================================ */
[data-radius="tight"]  { --radius-sm: 2px;  --radius-md: 4px;  --radius-lg: 6px;  }
[data-radius="medium"] { --radius-sm: 6px;  --radius-md: 8px;  --radius-lg: 12px; }
[data-radius="soft"]   { --radius-sm: 8px;  --radius-md: 12px; --radius-lg: 16px; }
[data-radius="pill"]   { --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; }

/* ============================================================
   PREFERS-CONTRAST: MORE — ojačanje (v4.10).
   Ob sistemski zahtevi po več kontrasta okrepi obrobe (hairline →
   strong), dvigne meta besedilo/placeholder na telesno raven in
   odebeli focus obroč. Vse prek theme-aware tokenov — deluje v
   dark IN light. Ločeno od forced-colors (Windows High-Contrast,
   ki barve nadomesti s sistemskimi).
   ============================================================ */
@media (prefers-contrast: more) {
  :root {
    --border:            var(--border-strong);
    --fg-subtle:         var(--fg-muted);
    --input-placeholder: var(--fg-muted);
    --input-border:      var(--border-strong);
    --ring-w:            5px;
  }
}