/* ============================================================
   DESIGN TOKENS v6 — the ONLY source of colour, type, spacing
   and motion in the app (doc 10 §2). Every component file
   (premium.css, theme-v5.css, ui-v6.css) and every blade must
   reference var(--token) — no hex / rgb() / rgba() literals
   outside this file. Default theme = light (:root); dark values
   live under [data-theme="dark"]. Layouts default to dark via
   the pre-paint script + data-theme attribute on <html>.
   ============================================================ */

/* ---------- Inter (self-hosted, BUILD-LAYOUT font phase) ----------
   The whole panel renders in Inter. Files live in public/fonts/ so
   deploys need no CDN. Weights 400/500/600/700/800 + 400 italic.
   --font-sans (below, :root) is the single family token; --pm-font
   in premium.css / theme-v5.css aliases it. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/client/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url('/client/fonts/inter-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/client/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/client/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/client/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/client/fonts/inter-800.woff2') format('woff2'); }

/* ---------- @property registrations (theme-transition fix, v7) ----------
   Theme colours live in custom properties, and unregistered custom
   properties do NOT interpolate — a dark↔light toggle therefore snapped
   instantly even with `transition: background-color` on consumers.
   Registering the theme-varying colour tokens as <color> makes them
   animatable; ui-v6.css carries the matching transition rules on :root
   and on the major surfaces. Initial values = the light theme values. */
@property --surface-0 { syntax: '<color>'; inherits: true; initial-value: #F3F5FF; }
@property --surface-1 { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --surface-2 { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --surface-3 { syntax: '<color>'; inherits: true; initial-value: #ECEFFB; }
@property --glass-bg { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.78); }
@property --glass-stroke { syntax: '<color>'; inherits: true; initial-value: rgba(23,32,84,0.10); }
@property --text-1 { syntax: '<color>'; inherits: true; initial-value: #131B3A; }
@property --text-2 { syntax: '<color>'; inherits: true; initial-value: #2E3A5F; }
@property --text-3 { syntax: '<color>'; inherits: true; initial-value: #5A6A94; }
@property --text-4 { syntax: '<color>'; inherits: true; initial-value: #8B99BE; }
@property --stroke { syntax: '<color>'; inherits: true; initial-value: rgba(23,32,84,0.09); }
@property --stroke-strong { syntax: '<color>'; inherits: true; initial-value: rgba(23,32,84,0.18); }
@property --brand-soft { syntax: '<color>'; inherits: true; initial-value: rgba(37,99,235,0.10); }
@property --brand-text { syntax: '<color>'; inherits: true; initial-value: #1D4ED8; }
@property --btn-edge { syntax: '<color>'; inherits: true; initial-value: rgba(23,32,84,0.50); }
@property --scroll-thumb { syntax: '<color>'; inherits: true; initial-value: rgba(23,32,84,0.22); }
@property --bad-text { syntax: '<color>'; inherits: true; initial-value: #B02E2E; }
@property --ok-text { syntax: '<color>'; inherits: true; initial-value: #0B6B45; }
@property --b-ok-bg { syntax: '<color>'; inherits: true; initial-value: rgba(16,185,129,0.12); }
@property --b-ok-fg { syntax: '<color>'; inherits: true; initial-value: #0A5C3C; }
@property --b-warn-bg { syntax: '<color>'; inherits: true; initial-value: rgba(245,158,11,0.12); }
@property --b-warn-fg { syntax: '<color>'; inherits: true; initial-value: #8A4D0F; }
@property --b-bad-bg { syntax: '<color>'; inherits: true; initial-value: rgba(244,63,94,0.12); }
@property --b-bad-fg { syntax: '<color>'; inherits: true; initial-value: #A02C2C; }
@property --b-info-bg { syntax: '<color>'; inherits: true; initial-value: rgba(6,182,212,0.12); }
@property --b-info-fg { syntax: '<color>'; inherits: true; initial-value: #0C5A7E; }
@property --b-mut-bg { syntax: '<color>'; inherits: true; initial-value: #EEF3FA; }
@property --b-mut-fg { syntax: '<color>'; inherits: true; initial-value: #5F7490; }
@property --b-purp-bg { syntax: '<color>'; inherits: true; initial-value: rgba(124,58,237,0.12); }
@property --b-purp-fg { syntax: '<color>'; inherits: true; initial-value: #5B21A8; }
@property --b-orng-bg { syntax: '<color>'; inherits: true; initial-value: rgba(234,88,12,0.13); }
@property --b-orng-fg { syntax: '<color>'; inherits: true; initial-value: #9A3412; }
@property --b-teal-bg { syntax: '<color>'; inherits: true; initial-value: rgba(13,148,136,0.13); }
@property --b-teal-fg { syntax: '<color>'; inherits: true; initial-value: #0F766E; }

:root {
  /* ---------- Type (BUILD-LAYOUT font phase: Inter everywhere) ---------- */
  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* ---------- Surfaces — four depths (v7 Glassify, light) ---------- */
  --surface-0: #F3F5FF;   /* page — soft lavender-white */
  --surface-1: #FFFFFF;   /* card */
  --surface-2: #FFFFFF;   /* raised: modal, dropdown */
  --surface-3: #ECEFFB;   /* sunken: table head, code */

  /* ---------- Glass (v7, light) ---------- */
  --glass-bg:     rgba(255,255,255,0.78);
  --glass-stroke: rgba(23,32,84,0.10);
  --glass-blur:   18px;
  --glass-shadow: 0 8px 32px rgba(17,25,60,0.10);

  /* ---------- Text — four steps (v7, light) ---------- */
  --text-1: #131B3A;   /* headings — deep navy */
  --text-2: #2E3A5F;   /* body */
  --text-3: #5A6A94;   /* muted */
  --text-4: #8B99BE;   /* disabled */

  /* ---------- Strokes (v7) ---------- */
  --stroke:        rgba(23,32,84,0.09);
  --stroke-strong: rgba(23,32,84,0.18);

  /* ---------- Brand (v7 Glassify: electric blue → cyan) ---------- */
  --brand:      #2563EB;
  --brand-hi:   #06B6D4;
  --brand-ink:  #FFFFFF;
  --brand-soft: rgba(37,99,235,0.10);
  --brand-deep: #1E40AF;

  /* ---------- Status (v7) ---------- */
  --ok: #10B981;  --ok-soft: rgba(16,185,129,0.12);
  --warn: #F59E0B; --warn-soft: rgba(245,158,11,0.13);
  --bad: #F43F5E;  --bad-soft: rgba(244,63,94,0.12);
  --info: #06B6D4; --info-soft: rgba(6,182,212,0.12);
  --ok-deep: #0B6B45;
  --warn-deep: #A8540F;
  --bad-deep: #B02E2E;

  /* ---------- Focus (doc §2.1) ---------- */
  --ring: 0 0 0 3px rgba(6,182,212,0.35);

  /* ---------- Radius (doc §2.1) ---------- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;

  /* ---------- Motion (doc §2.1) ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: 140ms; --base: 220ms; --slow: 420ms;
  /* v13 entrance motion (dashboard system, ui-v6.css v13 section):
     card/panel rise duration, bar-grow duration, per-child stagger step */
  --dur-rise: 600ms; --dur-grow: 900ms; --stagger: 60ms;

  /* ---------- Typography (doc §2.2) ---------- */
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.8125rem;  /* 13px */
  --fs-md: 0.875rem;   /* 14px */
  --fs-lg: 1rem;       /* 16px */
  --fs-xl: 1.375rem;   /* 22px */
  --fs-2xl: 2rem;      /* 32px */
  --lh-tight: 1.25;
  --lh-base: 1.5;
  --lh-loose: 1.7;
  --tracking-caps: 0.06em;

  /* ---------- Spacing — 4px grid (doc §2.3) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ---------- RGB triplets (v7) ---------- */
  --rgb-brand: 37,99,235;
  --rgb-brand-hi: 6,182,212;
  --rgb-ok: 16,185,129;
  --rgb-warn: 245,158,11;
  --rgb-bad: 244,63,94;
  --rgb-info: 6,182,212;
  --rgb-violet: 139,92,246;
  --rgb-orange: 249,115,22;
  --rgb-magenta: 217,70,239;

  /* ---------- Brand text (links / secondary buttons — contrast-tuned
     per theme: doc brand on dark surfaces is too dark for 4.5:1) ---------- */
  --brand-text: #1D4ED8;

  /* ---------- Constant colours (same in both themes) ---------- */
  --paper: #FFFFFF;
  --ink-on-dark: #FFFFFF;

  /* ---------- Button edge (tuned so ghost/secondary edges reach
     ≥3:1 against the page surface in both themes; doc §1.1/§2.4) ---------- */
  --btn-edge: rgba(23,32,84,0.50);

  /* ---------- Badge tones (bg + readable fg, per theme) ---------- */
  --b-ok-bg: var(--ok-soft);          --b-ok-fg: #0A5C3C;
  --b-warn-bg: var(--warn-soft);      --b-warn-fg: #8A4D0F;
  --b-bad-bg: var(--bad-soft);        --b-bad-fg: #A02C2C;
  --b-info-bg: var(--info-soft);      --b-info-fg: #0C5A7E;
  --b-mut-bg: var(--surface-3);       --b-mut-fg: var(--text-3);
  --b-purp-bg: rgba(124,58,237,0.12);  --b-purp-fg: #5B21A8;
  --b-orng-bg: rgba(234,88,12,0.13);  --b-orng-fg: #9A3412;
  --b-teal-bg: rgba(13,148,136,0.13); --b-teal-fg: #0F766E;

  /* ---------- Sidebar (v7: deep navy glass in BOTH themes, by design) ---------- */
  --side-1: #0C1332;
  --side-2: #070C22;
  --side-text: #C0CBE8;
  --side-muted: #7E8DB5;
  --side-label: #8494BE;
  --side-hover: rgba(255,255,255,0.06);
  --side-stroke: rgba(148,178,255,0.16);

  /* ---------- Rail flyout + tooltip (v14 Glassify) ----------
     The sidebar is deep navy in BOTH themes, so its flyout must be
     navy glass in both themes too. The old flyout composed
     --glass-bg (white .78 in light) over --side-2 and rendered as a
     flat light-gray panel with near-invisible pale links in the
     light theme. --fly-bg is a theme-independent navy glass. */
  --fly-bg: rgba(9, 14, 36, 0.96);
  --fly-stroke: rgba(148, 178, 255, 0.24);
  --tip-bg: #131B3A;
  --tip-fg: #FFFFFF;
  --tip-stroke: rgba(23, 32, 84, 0.25);

  /* ---------- v7 Glassify accent palette (solid stops for charts/dots) ---------- */
  --c-blue: #2563EB;
  --c-cyan: #06B6D4;
  --c-violet: #8B5CF6;
  --c-purple: #A855F7;
  --c-green: #10B981;
  --c-emerald: #34D399;
  --c-amber: #F59E0B;
  --c-orange: #F97316;
  --c-rose: #F43F5E;
  --c-magenta: #D946EF;

  /* ---------- Gradients (v7 Glassify family) ----------
     --grad-brand carries WHITE text (buttons, active pills, pagination):
     both stops are deep enough for ≥4.5:1 white contrast.
     Icon/decorative gradients may run brighter (cyan/emerald ends). */
  --grad-brand: linear-gradient(120deg, #2563EB 0%, #4F46E5 55%, #7C3AED 100%);
  /* LAYOUT-REPAIR 2026-10-24: blue/green/orange gradient END stops deepened —
     white text (incl. the .85-alpha QA subtitle) must hold ≥3:1 at EVERY stop
     (measured: #06B6D4 = 2.43, #34D399 = 1.92, #F59E0B = 2.16 — all fail). */
  --grad-blue: linear-gradient(135deg, #2563EB, #0891B2);
  --grad-violet: linear-gradient(135deg, #7C3AED, #A855F7);
  --grad-green: linear-gradient(135deg, #047857, #059669);
  --grad-orange: linear-gradient(135deg, #EA580C, #D97706);
  --grad-rose: linear-gradient(135deg, #E11D48, #F43F5E);
  /* danger/success/warning gradients carry WHITE text in both themes, so
     their stops are FIXED hex — they must not reference the *-deep text
     tokens, which flip light in dark theme (see dark block). */
  --grad-danger: linear-gradient(135deg, #BE3636, #B02E2E);
  --grad-success: linear-gradient(135deg, #0F7351, #0B6B45);
  --grad-warning: linear-gradient(135deg, #B45309, #D97706);
  /* Fixed neutrals (theme-independent): Tailwind gray/black utilities are
     used as dark buttons/panels in BOTH themes (trial toggle, console). */
  --btn-gray-6: #475569;  --btn-gray-7: #334155;  --ink-950: #05070F;
  --on-warn: #26160A;
  --bad-text: #B02E2E;  --ok-text: #0B6B45; /* dark text on amber — white on --warn is only 2.2:1 */
  --grad-stat-1: linear-gradient(135deg, #2563EB, #0891B2);
  --grad-stat-2: linear-gradient(135deg, #7C3AED, #A855F7);
  --grad-stat-3: linear-gradient(135deg, #047857, #059669);
  --grad-stat-4: linear-gradient(135deg, #EA580C, #D97706);
  --grad-stat-5: linear-gradient(135deg, #0891B2, #2563EB);
  --grad-stat-6: linear-gradient(135deg, #1E293B, #0B1130);
  --grad-side: linear-gradient(180deg, var(--side-1), var(--side-2));
  --grad-hero: linear-gradient(135deg, #060A1A 0%, #131B3F 55%, #2563EB 100%);
  --grad-bar: linear-gradient(180deg, var(--brand-hi), var(--brand));
  --grad-bar-2: linear-gradient(180deg, var(--info), var(--brand-deep));
  --grad-soft: linear-gradient(135deg, var(--brand-soft), var(--info-soft));

  /* ---------- Card surface (v7: subtle vertical sheen = glass feel) ---------- */
  --card-bg: linear-gradient(180deg, #FFFFFF, #FAFBFF);
  --card-sheen: rgba(255,255,255,0);

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(17,25,60,0.05), 0 10px 28px -14px rgba(17,25,60,0.14);
  --shadow-2: 0 2px 4px rgba(17,25,60,0.05), 0 18px 42px -16px rgba(37,99,235,0.22);
  --shadow-brand: 0 6px 16px -6px rgba(37,99,235,0.45);
  --shadow-brand-lg: 0 10px 22px -6px rgba(37,99,235,0.5);
  --shadow-bad: 0 6px 16px -6px rgba(244,63,94,0.5);
  --shadow-ok: 0 6px 16px -6px rgba(16,185,129,0.5);
  --shadow-warn: 0 6px 16px -6px rgba(245,158,11,0.5);
  --shadow-pop: 0 30px 60px -18px rgba(17,25,60,0.35);
  --shadow-side: 4px 0 24px -8px rgba(2,6,23,0.35);

  /* ---------- Page backdrop mesh (v8 light: pastel aurora waves —
     elongated bands sweep the top, soft colour pools at the corners) ---------- */
  --mesh:
    radial-gradient(1150px 430px at 88% -12%, rgba(124,58,237,0.17), transparent 68%),
    radial-gradient(900px 480px at 4% -10%, rgba(37,99,235,0.19), transparent 66%),
    radial-gradient(820px 460px at 58% 114%, rgba(6,182,212,0.15), transparent 66%),
    radial-gradient(560px 400px at 96% 62%, rgba(217,70,239,0.08), transparent 65%),
    radial-gradient(520px 380px at 10% 88%, rgba(16,185,129,0.10), transparent 65%);

  /* ---------- v8 Glassify-deepening tokens (light) ----------
     --wave: second fixed backdrop layer (body::after) — two wide,
     soft diagonal ribbons. KPI accent helpers: --tint-* is the top
     overlay wash, --ambient-* the coloured shadow under the card,
     --ic-glow-* the glow colour behind the round icon. ---------- */
  --wave:
    radial-gradient(1250px 380px at 108% 16%, rgba(37,99,235,0.10), transparent 62%),
    radial-gradient(1150px 420px at -12% 74%, rgba(124,58,237,0.09), transparent 62%);
  --tint-blue:   rgba(37,99,235,0.15);
  --tint-violet: rgba(124,58,237,0.14);
  --tint-green:  rgba(5,150,105,0.13);
  --tint-orange: rgba(234,88,12,0.13);
  --ambient-blue:   rgba(37,99,235,0.30);
  --ambient-violet: rgba(124,58,237,0.30);
  --ambient-green:  rgba(5,150,105,0.28);
  --ambient-orange: rgba(234,88,12,0.30);
  --ic-glow-blue:   rgba(37,99,235,0.55);
  --ic-glow-violet: rgba(124,58,237,0.55);
  --ic-glow-green:  rgba(5,150,105,0.50);
  --ic-glow-orange: rgba(234,88,12,0.55);
  --greet-shadow: none;
  /* sidebar: deep navy glass in both themes + aurora sheen over it */
  --side-bg:
    radial-gradient(430px 300px at 18% -6%, rgba(124,58,237,0.30), transparent 66%),
    radial-gradient(400px 340px at 96% 34%, rgba(37,99,235,0.22), transparent 66%),
    radial-gradient(460px 320px at 30% 108%, rgba(6,182,212,0.14), transparent 66%),
    linear-gradient(180deg, var(--side-1), var(--side-2));

  /* ---------- Scrollbar ---------- */
  --scroll-thumb: rgba(23,32,84,0.22);

  /* Alpha scale (generated — family alphas used by components) */
  --ab-07: rgba(37,99,235,0.07);
  --ab-08: rgba(37,99,235,0.08);
  --ab-10: rgba(37,99,235,0.1);
  --ab-12: rgba(37,99,235,0.12);
  --ab-13: rgba(37,99,235,0.13);
  --ab-14: rgba(37,99,235,0.14);
  --ab-17: rgba(37,99,235,0.17);
  --ab-18: rgba(37,99,235,0.18);
  --ab-22: rgba(37,99,235,0.22);
  --ab-25: rgba(37,99,235,0.25);
  --ab-28: rgba(37,99,235,0.28);
  --ab-30: rgba(37,99,235,0.3);
  --ab-35: rgba(37,99,235,0.35);
  --ab-38: rgba(37,99,235,0.38);
  --ab-40: rgba(37,99,235,0.4);
  --ab-45: rgba(37,99,235,0.45);
  --ab-50: rgba(37,99,235,0.5);
  --ab-55: rgba(37,99,235,0.55);
  --ab-60: rgba(37,99,235,0.6);
  --ab-65: rgba(37,99,235,0.65);
  --ab-93: rgba(37,99,235,0.93);
  --abd-10: rgba(244,63,94,0.1);
  --abd-13: rgba(244,63,94,0.13);
  --abd-14: rgba(244,63,94,0.14);
  --abd-20: rgba(244,63,94,0.2);
  --abd-35: rgba(244,63,94,0.35);
  --abd-45: rgba(244,63,94,0.45);
  --abd-50: rgba(244,63,94,0.5);
  --abd-55: rgba(244,63,94,0.55);
  --abd-93: rgba(244,63,94,0.93);
  --abd-94: rgba(244,63,94,0.94);
  --ai-02: rgba(17,25,60,0.02);
  --ai-04: rgba(17,25,60,0.04);
  --ai-05: rgba(17,25,60,0.05);
  --ai-12: rgba(17,25,60,0.12);
  --ai-14: rgba(17,25,60,0.14);
  --ai-16: rgba(17,25,60,0.16);
  --ai-35: rgba(17,25,60,0.35);
  --ai-50: rgba(17,25,60,0.5);
  --ai-65: rgba(17,25,60,0.65);
  --ai-80: rgba(17,25,60,0.8);
  --ai-82: rgba(17,25,60,0.82);
  --ai-88: rgba(17,25,60,0.88);
  --ai-90: rgba(17,25,60,0.9);
  --ai-95: rgba(17,25,60,0.95);
  --ain-10: rgba(6,182,212,0.1);
  --ain-13: rgba(6,182,212,0.13);
  --ain-14: rgba(6,182,212,0.14);
  --ain-15: rgba(6,182,212,0.15);
  --ain-16: rgba(6,182,212,0.16);
  --ain-35: rgba(6,182,212,0.35);
  --ain-93: rgba(6,182,212,0.93);
  --ak-35: rgba(0,0,0,0.35);
  --ak-40: rgba(0,0,0,0.4);
  --ak-45: rgba(0,0,0,0.45);
  --ak-50: rgba(0,0,0,0.5);
  --ak-55: rgba(0,0,0,0.55);
  --ak-60: rgba(0,0,0,0.6);
  --ak-65: rgba(0,0,0,0.65);
  --am-08: rgba(95,116,144,0.08);
  --am-12: rgba(95,116,144,0.12);
  --am-14: rgba(95,116,144,0.14);
  --am-16: rgba(95,116,144,0.16);
  --am-18: rgba(95,116,144,0.18);
  --am-28: rgba(95,116,144,0.28);
  --am-30: rgba(95,116,144,0.3);
  --am-35: rgba(95,116,144,0.35);
  --ao-07: rgba(16,185,129,0.07);
  --ao-10: rgba(16,185,129,0.1);
  --ao-13: rgba(16,185,129,0.13);
  --ao-14: rgba(16,185,129,0.14);
  --ao-15: rgba(16,185,129,0.15);
  --ao-35: rgba(16,185,129,0.35);
  --ao-45: rgba(16,185,129,0.45);
  --ao-50: rgba(16,185,129,0.5);
  --ao-55: rgba(16,185,129,0.55);
  --ao-93: rgba(16,185,129,0.93);
  --aw-02: rgba(255,255,255,0.02);
  --aw-03: rgba(255,255,255,0.03);
  --aw-04: rgba(255,255,255,0.04);
  --aw-05: rgba(255,255,255,0.05);
  --aw-06: rgba(255,255,255,0.06);
  --aw-07: rgba(255,255,255,0.07);
  --aw-08: rgba(255,255,255,0.08);
  --aw-09: rgba(255,255,255,0.09);
  --aw-10: rgba(255,255,255,0.1);
  --aw-12: rgba(255,255,255,0.12);
  --aw-14: rgba(255,255,255,0.14);
  --aw-15: rgba(255,255,255,0.15);
  --aw-18: rgba(255,255,255,0.18);
  --aw-22: rgba(255,255,255,0.22);
  --aw-24: rgba(255,255,255,0.24);
  --aw-35: rgba(255,255,255,0.35);
  --aw-45: rgba(255,255,255,0.45);
  --aw-55: rgba(255,255,255,0.55);
  --aw-65: rgba(255,255,255,0.65);
  --aw-70: rgba(255,255,255,0.7);
  --aw-72: rgba(255,255,255,0.72);
  --aw-75: rgba(255,255,255,0.75);
  --aw-78: rgba(255,255,255,0.78);
  --aw-80: rgba(255,255,255,0.8);
  --aw-82: rgba(255,255,255,0.82);
  --aw-85: rgba(255,255,255,0.85);
  --aw-88: rgba(255,255,255,0.88);
  --aw-90: rgba(255,255,255,0.9);
  --aw-92: rgba(255,255,255,0.92);
  --aw-94: rgba(255,255,255,0.94);
  --aw-97: rgba(255,255,255,0.97);
  --awn-10: rgba(245,158,11,0.1);
  --awn-15: rgba(245,158,11,0.15);
  --awn-16: rgba(245,158,11,0.16);
  --awn-35: rgba(245,158,11,0.35);
  --awn-50: rgba(245,158,11,0.5);
  --awn-55: rgba(245,158,11,0.55);
  --awn-60: rgba(245,158,11,0.6);
  --awn-94: rgba(245,158,11,0.94);
  --as-60: rgba(238,243,250,0.6);
  --as-75: rgba(238,243,250,0.75);
  --as-80: rgba(238,243,250,0.8);
  --as-82: rgba(238,243,250,0.82);
  /* Supplementary alphas + legacy aliases (v5 tail rules) */
  --abd-40: rgba(244,63,94,0.4);
  --ao-40: rgba(16,185,129,0.4);
  --awn-45: rgba(245,158,11,0.45);
  --ai-97: rgba(17,25,60,0.97);
  --aw-50: rgba(255,255,255,0.5);
  --aw-95: rgba(255,255,255,0.95);
  --v5-green: 16,185,129;
  --v5-rose: 244,63,94;
  --v5-green-tx: var(--b-ok-fg);
  --v5-rose-tx: var(--b-bad-fg);
}

:root[data-theme="dark"] {
  /* ---------- Surfaces (v7 Glassify, dark: deep navy) ---------- */
  --surface-0: #060A1A;   /* page — deepest navy */
  --surface-1: #0D1533;   /* card */
  --surface-2: #141D42;   /* raised: modal, dropdown */
  --surface-3: #0A0F2A;   /* sunken: table head, code */

  /* ---------- Glass (v7, dark) ---------- */
  --glass-bg:     rgba(13,21,51,0.66);
  --glass-stroke: rgba(165,190,255,0.14);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.45);

  /* ---------- Card surface (v7, dark: navy glass sheen) ---------- */
  --card-bg: linear-gradient(165deg, rgba(70,100,190,0.18), rgba(13,21,51,0) 52%), #0D1533;
  --card-sheen: rgba(190,210,255,0.07);

  /* ---------- Text (v7, dark) ---------- */
  --text-1: #EDF2FF;
  --text-2: #C3CEE8;
  --text-3: #8B9BC4;
  --bad-text: #F09393;  --ok-text: #5FD3A5;
  /* LAYOUT-REPAIR 2026-10-24: the *-deep tokens are TEXT tones (badge
     labels, danger-button text). They never flipped, so dark theme kept
     the light-theme dark tints — #0B6B45 badge text on a dark badge
     measured 2.31:1. Flip them to the same values as the dark badge
     foreground tokens. (Gradient stops no longer reference them.) */
  --ok-deep: #4ADE80;  --warn-deep: #FBBF24;  --bad-deep: #FDA4AF;
  --text-4: #5D6E96;

  /* ---------- Strokes (v7, dark: bluish light strokes) ---------- */
  --stroke:        rgba(165,190,255,0.10);
  --stroke-strong: rgba(165,190,255,0.22);

  /* ---------- Brand (v7, dark) ---------- */
  --brand-soft: rgba(37,99,235,0.20);
  --brand-text: #7CC4FF;

  /* ---------- Button edge (dark) ---------- */
  --btn-edge: rgba(190,205,255,0.50);

  /* ---------- Badge tones (dark: translucent bg + light fg) ---------- */
  --b-ok-bg: rgba(16,185,129,0.16);   --b-ok-fg: #4ADE80;
  --b-warn-bg: rgba(245,158,11,0.16); --b-warn-fg: #FBBF24;
  --b-bad-bg: rgba(244,63,94,0.16);   --b-bad-fg: #FDA4AF;
  --b-info-bg: rgba(6,182,212,0.16); --b-info-fg: #7DD3FC;
  --b-mut-bg: rgba(148,163,184,0.14);  --b-mut-fg: #B6C2D6;
  --b-purp-bg: rgba(139,92,246,0.18); --b-purp-fg: #C4B5FD;
  --b-orng-bg: rgba(249,115,22,0.16); --b-orng-fg: #FDBA74;
  --b-teal-bg: rgba(45,212,191,0.14); --b-teal-fg: #5EEAD4;

  /* ---------- Shadows (dark) ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 10px 30px -12px rgba(0,0,0,0.55);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.4), 0 18px 44px -14px rgba(37,99,235,0.35);
  --shadow-pop: 0 30px 60px -18px rgba(0,0,0,0.6);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.45);

  /* ---------- Page backdrop mesh (v8 dark: full aurora — bright
     flowing waves top-right, colour pools bottom-left; kept off the
     top-left so the white greeting always sits on deep navy) ---------- */
  --mesh:
    radial-gradient(1180px 520px at 96% -14%, rgba(124,58,237,0.44), transparent 66%),
    radial-gradient(980px 500px at 30% -18%, rgba(37,99,235,0.46), transparent 64%),
    radial-gradient(760px 460px at -6% -6%, rgba(37,99,235,0.30), transparent 62%),
    radial-gradient(880px 540px at 58% 114%, rgba(6,182,212,0.24), transparent 66%),
    radial-gradient(620px 440px at -8% 82%, rgba(124,58,237,0.22), transparent 65%),
    radial-gradient(520px 380px at 86% 58%, rgba(217,70,239,0.13), transparent 65%),
    radial-gradient(460px 340px at 68% 30%, rgba(16,185,129,0.08), transparent 65%);

  /* ---------- v8 Glassify-deepening tokens (dark) ---------- */
  --wave:
    radial-gradient(1350px 420px at 110% 18%, rgba(6,182,212,0.16), transparent 62%),
    radial-gradient(1200px 460px at -14% 76%, rgba(37,99,235,0.15), transparent 62%);
  --tint-blue:   rgba(37,99,235,0.20);
  --tint-violet: rgba(139,92,246,0.20);
  --tint-green:  rgba(16,185,129,0.17);
  --tint-orange: rgba(249,115,22,0.18);
  --ambient-blue:   rgba(37,99,235,0.48);
  --ambient-violet: rgba(139,92,246,0.48);
  --ambient-green:  rgba(16,185,129,0.42);
  --ambient-orange: rgba(249,115,22,0.46);
  --ic-glow-blue:   rgba(59,130,246,0.75);
  --ic-glow-violet: rgba(168,85,247,0.75);
  --ic-glow-green:  rgba(52,211,153,0.70);
  --ic-glow-orange: rgba(251,146,60,0.75);
  /* soft dark scrim-shadow so the greeting never dissolves into the glow */
  --greet-shadow: 0 2px 30px rgba(2,5,16,0.65), 0 1px 3px rgba(2,5,16,0.55);

  /* ---------- Scrollbar (dark) ---------- */
  --scroll-thumb: rgba(148,178,255,0.30);

  /* ---------- Rail flyout + tooltip (v14 Glassify, dark) ---------- */
  --fly-bg: rgba(13, 21, 51, 0.96);
  --fly-stroke: rgba(165, 190, 255, 0.22);
  --tip-bg: #1C2953;
  --tip-fg: #EDF2FF;
  --tip-stroke: rgba(165, 190, 255, 0.25);
}

/* Blade legacy slate-400 alphas (148,163,184) — pass-2 scrub targets */
:root { --asl-22: rgba(148,163,184,.22); --asl-30: rgba(148,163,184,.30); --asl-50: rgba(148,163,184,.50); --asl-55: rgba(148,163,184,.55); --ak-75: rgba(16,185,129,.75); --white: #FFFFFF; }
:root { --asl-18: rgba(148,163,184,.18); --awn-90: rgba(245,158,11,.90); --nav-92: rgba(6,10,26,.92); }