:root {
  color-scheme: dark light;
 
  /* ───── Brand spectrum (Prism palette + vibrant teal primary) ─────
     Refined from the upstream spec. Six perceptually-balanced signal colors,
     with teal as the anchor. Each color carries one semantic job. Used as
     signal, never as a surface. */
  --brand-navy:   #0E1A52;
  --brand-white:  #FFFFFF;
  --brand-blue:   #00E8C0;   /* vibrant teal — primary action / focus / live */
  --brand-lime:   #5BCB45;   /* jade — admitted / filed / resolved */
  --brand-orange: #E94F33;   /* ember — danger / withdrawn / overdue */
  --brand-aqua:   #00E8C0;   /* alias of primary — live indicator pulses the brand */
  --brand-gold:   #E8A53A;   /* amber — warn / pending tribunal */
  --brand-pink:   #DE7AC9;   /* orchid — privileged / sealed */
  --brand-coral:  #E94F33;   /* alias of ember (merged — was redundant) */
  --brand-plasma: #7C5CFF;   /* violet — AI / generative moments */
 
  /* ───── Surfaces (dark, layered) ─────
     Subtle blue undertone keeps it from feeling clinical.
     Stack: sunken → canvas → bg → panel → elevated → overlay */
  --bg-sunken:    #050510;
  --bg-canvas:    #07070F;
  --bg:           #0A0A14;
  --bg-panel:     #11111E;
  --bg-elevated:  #181828;
  --bg-overlay:   #1F1F33;
 
  /* Translucent layers for glass/blur surfaces */
  --glass-thin:   color-mix(in srgb, #FFFFFF 4%, transparent);
  --glass:        color-mix(in srgb, #FFFFFF 7%, transparent);
  --glass-thick:  color-mix(in srgb, #FFFFFF 12%, transparent);
  --scrim:        color-mix(in srgb, #000000 65%, transparent);
 
  /* ───── Ink (text hierarchy) ───── */
  --ink:          #F2F2F7;
  --ink-2:        color-mix(in srgb, var(--ink) 82%, transparent);
  --ink-dim:      color-mix(in srgb, var(--ink) 58%, transparent);
  --ink-faint:    color-mix(in srgb, var(--ink) 30%, transparent);
  --ink-ghost:    color-mix(in srgb, var(--ink) 12%, transparent);
  --ink-inverse:  #0A0A14;
 
  /* ───── Strokes ───── */
  --rule:          color-mix(in srgb, var(--ink) 8%, transparent);
  --rule-strong:   color-mix(in srgb, var(--ink) 18%, transparent);
  --rule-emphasis: color-mix(in srgb, var(--brand-blue) 55%, transparent);
 
  /* ───── Semantic intents ───── */
  --accent:        var(--brand-blue);
  --accent-soft:   color-mix(in srgb, var(--brand-blue) 16%, transparent);
  --accent-glow:   color-mix(in srgb, var(--brand-blue) 38%, transparent);
 
  --ai:            var(--brand-plasma);
  --ai-soft:       color-mix(in srgb, var(--brand-plasma) 14%, transparent);
 
  --live:          var(--brand-aqua);
  --ok:            var(--brand-lime);
  --warn:          var(--brand-gold);
  --danger:        var(--brand-orange);
  --highlight:     var(--brand-pink);
 
  /* ───── Signature gradients ─────
     Re-keyed to the Prism palette. Cool teal anchors the brand-side; warm
     orchid/ember anchors the AI/heat side. */
  --grad-aurora:   linear-gradient(135deg, #00E8C0 0%, #7C5CFF 50%, #DE7AC9 100%);
  --grad-plasma:   linear-gradient(135deg, #0E1A52 0%, #7C5CFF 60%, #DE7AC9 100%);
  --grad-cyber:    linear-gradient(135deg, #00E8C0 0%, #5BCB45 100%);
  --grad-ember:    linear-gradient(135deg, #E94F33 0%, #E8A53A 100%);
  --grad-iris:     conic-gradient(from 180deg at 50% 50%,
                     #00E8C0, #7C5CFF, #DE7AC9, #E8A53A, #5BCB45, #00E8C0);
 
  /* Ambient mesh — apply to body or hero containers for an AI-ish backdrop */
  --mesh-bg:
    radial-gradient(at 12% 8%,  color-mix(in srgb, var(--brand-blue)   22%, transparent) 0%, transparent 45%),
    radial-gradient(at 88% 14%, color-mix(in srgb, var(--brand-plasma) 18%, transparent) 0%, transparent 50%),
    radial-gradient(at 70% 92%, color-mix(in srgb, var(--brand-aqua)   14%, transparent) 0%, transparent 55%);
 
  /* Subtle noise overlay (use as ::after with mix-blend-mode: overlay) */
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
 
  /* ───── Typography ─────
     Modern variable grotesks for body/display, geometric mono for code,
     a sliver of serif kept for tasteful accents (callout numerals, drop caps). */
  --ff-display: "Geist","Inter Variable","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-body:    "Geist","Inter Variable","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-mono:    "Geist Mono","JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --ff-serif:   "Instrument Serif","Iowan Old Style","Georgia",serif;
 
  /* Scale — 1.200 ratio (minor third) */
  --fs-3xs: 0.6875rem;   /* 11 */
  --fs-2xs: 0.75rem;     /* 12 */
  --fs-xs:  0.8125rem;   /* 13 */
  --fs-sm:  0.875rem;    /* 14 */
  --fs-md:  1rem;        /* 16 */
  --fs-lg:  1.125rem;    /* 18 */
  --fs-xl:  1.375rem;    /* 22 */
  --fs-2xl: 1.75rem;     /* 28 */
  --fs-3xl: 2.25rem;     /* 36 */
  --fs-4xl: 3rem;        /* 48 */
  --fs-5xl: 4rem;        /* 64 */
  --fs-display: clamp(2.5rem, 6vw, 5.5rem);
 
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:    0.04em;
  --tracking-mono:    0.08em;   /* for ALL-CAPS mono eyebrows */
 
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
 
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
 
  /* ───── Spacing (4px base) ───── */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */
 
  /* ───── Radii ───── */
  --radius-none:   0;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     18px;
  --radius-2xl:    24px;
  --radius-pill:   999px;
  --radius-circle: 50%;
 
  /* ───── Elevation: shadows + glows ─────
     Shadows give depth; glows signal energy/interactivity.
     Default elevation includes a 1px hairline for crisp edges. */
  --shadow-xs:    0 1px 0 rgba(0,0,0,0.4),  0 0 0 1px var(--rule);
  --shadow-sm:    0 2px 6px rgba(0,0,0,0.35), 0 0 0 1px var(--rule);
  --shadow-md:    0 8px 24px rgba(0,0,0,0.45), 0 0 0 1px var(--rule);
  --shadow-lg:    0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px var(--rule-strong);
  --shadow-xl:    0 40px 100px rgba(0,0,0,0.65), 0 0 0 1px var(--rule-strong);
  --shadow-inner: inset 0 1px 0 color-mix(in srgb, #FFFFFF 6%, transparent);
 
  --glow-accent:  0 0 28px color-mix(in srgb, var(--brand-blue)   45%, transparent);
  --glow-ai:      0 0 32px color-mix(in srgb, var(--brand-plasma) 42%, transparent);
  --glow-live:    0 0 20px color-mix(in srgb, var(--brand-aqua)   55%, transparent);
  --glow-ok:      0 0 22px color-mix(in srgb, var(--brand-lime)   45%, transparent);
  --glow-danger:  0 0 24px color-mix(in srgb, var(--brand-orange) 45%, transparent);
  --glow-ambient: 0 0 80px color-mix(in srgb, var(--brand-blue)   18%, transparent);
 
  /* ───── Motion ───── */
  --ease-snappy: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
 
  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;
  --dur-slower:  720ms;
  --dur-crawl:   1200ms;
 
  /* ───── Backdrop blur ───── */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 32px;
  --blur-xl: 64px;
 
  /* ───── Z-index scale ───── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
 
  /* ───── Layout ───── */
  --container-sm: 40rem;
  --container-md: 64rem;
  --container-lg: 80rem;
  --container-xl: 96rem;
  --gutter: clamp(1rem, 3vw, 2rem);
 
  /* ───── Focus ring ─────
     Refined: 1px inset spacer + 3px tinted ring (was 2px + 4px solid).
     Reads as deliberate without shouting. */
  --ring: 0 0 0 1px var(--bg-canvas), 0 0 0 3px color-mix(in srgb, var(--brand-blue) 65%, transparent);
}
 
/* ═══ Light mode ═══════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-sunken:   #F1F1ED;
    --bg-canvas:   #FFFFFF;
    --bg:          #FAFAF7;
    --bg-panel:    #F1F1EE;
    --bg-elevated: #FFFFFF;
    --bg-overlay:  #FFFFFF;
 
    --glass-thin:  color-mix(in srgb, var(--brand-navy) 3%, transparent);
    --glass:       color-mix(in srgb, var(--brand-navy) 5%, transparent);
    --glass-thick: color-mix(in srgb, var(--brand-navy) 9%, transparent);
    --scrim:       color-mix(in srgb, var(--brand-navy) 40%, transparent);
 
    --ink:         var(--brand-navy);
    --ink-inverse: #FAFAF7;
 
    --rule:        color-mix(in srgb, var(--ink) 10%, transparent);
    --rule-strong: color-mix(in srgb, var(--ink) 22%, transparent);
 
    --shadow-xs:   0 1px 0 rgba(0,0,66,0.04), 0 0 0 1px var(--rule);
    --shadow-sm:   0 2px 6px rgba(0,0,66,0.06), 0 0 0 1px var(--rule);
    --shadow-md:   0 8px 24px rgba(0,0,66,0.08), 0 0 0 1px var(--rule);
    --shadow-lg:   0 24px 60px rgba(0,0,66,0.12), 0 0 0 1px var(--rule-strong);
    --shadow-xl:   0 40px 100px rgba(0,0,66,0.18), 0 0 0 1px var(--rule-strong);
  }
}
 
/* Forced theme overrides */
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* Explicit light theme — applies the light palette regardless of the OS
   prefers-color-scheme (the media query above only fires when the OS itself
   is light). Keep in sync with the @media block. */
:root[data-theme="light"] {
  --bg-sunken:   #F1F1ED;
  --bg-canvas:   #FFFFFF;
  --bg:          #FAFAF7;
  --bg-panel:    #F1F1EE;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  #FFFFFF;

  --glass-thin:  color-mix(in srgb, var(--brand-navy) 3%, transparent);
  --glass:       color-mix(in srgb, var(--brand-navy) 5%, transparent);
  --glass-thick: color-mix(in srgb, var(--brand-navy) 9%, transparent);
  --scrim:       color-mix(in srgb, var(--brand-navy) 40%, transparent);

  --ink:         var(--brand-navy);
  --ink-inverse: #FAFAF7;

  --rule:        color-mix(in srgb, var(--ink) 10%, transparent);
  --rule-strong: color-mix(in srgb, var(--ink) 22%, transparent);

  --shadow-xs:   0 1px 0 rgba(0,0,66,0.04), 0 0 0 1px var(--rule);
  --shadow-sm:   0 2px 6px rgba(0,0,66,0.06), 0 0 0 1px var(--rule);
  --shadow-md:   0 8px 24px rgba(0,0,66,0.08), 0 0 0 1px var(--rule);
  --shadow-lg:   0 24px 60px rgba(0,0,66,0.12), 0 0 0 1px var(--rule-strong);
  --shadow-xl:   0 40px 100px rgba(0,0,66,0.18), 0 0 0 1px var(--rule-strong);
}
 
/* ═══ Recommended primitives (optional but nice) ══════════════════ */
* { box-sizing: border-box; }
 
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: var(--leading-normal);
  font-feature-settings: "ss01", "cv11", "calt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
 
::selection { background: var(--brand-blue); color: var(--brand-white); }
 
code, pre, kbd, samp { font-family: var(--ff-mono); font-size: 0.95em; }
 
/* Mono eyebrow label — used everywhere in tech-forward UI */
.eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink-dim);
}
 
/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}