/* Design TOKENS and the themes that swap them. hud.css owns the chrome (what the parts are);
   this file owns the values (what they look like). Split so a new theme is one block here and
   nothing there — the FUI look used to be spelled out at ~90 call sites, which is why "themeable"
   meant "rewrite the stylesheet".

   THE SWITCH ANIMATES. Custom properties do not interpolate on their own, but the declarations
   that CONSUME them do: change --hud-radius and any `border-radius: var(--hud-radius)` transitions
   normally. scene-theme.ts puts `.theming` on <html> for the duration of a switch, which turns on
   one broad transition (bottom of this file) and then takes it off again — so the morph costs
   nothing at rest and cannot fight the per-element transitions in hud.css.

   Which means: KEEP VALUE SHAPES IDENTICAL ACROSS THEMES or that property snaps instead of
   sliding. Shadows keep their layer count (a glow "turns off" as a transparent colour, never as
   `none`); the panel's clip-path keeps all five polygon points (the notch goes to 0px, it does not
   become `none`); lengths stay lengths. scene-theme.test.ts enforces the token set is identical
   across themes, because a theme that simply forgets one inherits FUI's value and looks broken in
   a way no page ever complains about.

   Three properties cannot be interpolated by any browser and are documented rather than fought:
   text-transform, font-family, and background-image (the dot grid). They snap at the midpoint of
   the morph, which reads as intentional under everything else sliding. */

/* Motion is policy, not palette: every theme animates at the same speed, so these sit OUTSIDE the
   theme blocks. scene-theme.test.ts checks the theme blocks against each other token for token, and
   a duplicated-in-triplicate duration is exactly the kind of thing that drifts. */
:root { --hud-fast: 0.12s; --hud-morph: 0.45s; }

/* ---- FUI (default) — GMUNK/Oblivion: deep space, ice chrome, hairlines, Halliburton red -------- */
:root, [data-theme="fui"] {
  --hud-bg: #080808;                          /* deep space — near-black, fully desaturated */
  --hud-glass: rgba(18, 18, 18, 0.78);        /* panel glass — deep neutral gray */
  --hud-glass-solid: rgba(18, 18, 18, 0.92);  /* opaque variant — status pill interiors */
  --hud-scrim: rgba(8, 8, 8, 0.4);            /* full-page atmospheric falloff behind the frame */
  --hud-ink: #e6e7e8;                         /* primary text — cool paper-white */
  --hud-dim: #8a8a8c;                         /* labels/secondary — desaturated blue-grey */
  --hud-accent: #cccccf;                      /* ice — chrome/data */
  --hud-accent-dim: rgba(200, 200, 204, 0.30);
  --hud-hot: #ff2d20;                         /* ACTIVE/attention. Halliburton red, brightened */
  --hud-hot-08: rgba(255, 45, 32, 0.08);      /* the hot tint at six strengths, so a hover/press */
  --hud-hot-12: rgba(255, 45, 32, 0.12);      /* stays one hue per theme instead of a hardcoded red */
  --hud-hot-26: rgba(255, 45, 32, 0.26);
  --hud-hot-35: rgba(255, 45, 32, 0.35);
  --hud-hot-60: rgba(255, 45, 32, 0.6);       /* glitch text-shadow — these two lived hardcoded in */
  --hud-hot-80: rgba(255, 45, 32, 0.8);       /* hud.css keyframes, flashing FUI red in every theme */
  --hud-danger: #ffb0a8;                      /* destructive menu items — distinct from --hud-hot */
  --hud-warn: #ff6a3d;                        /* red-orange — warnings/PROC/targets */
  --hud-line: rgba(200, 200, 204, 0.22);      /* hairlines */
  --hud-dot: rgba(200, 200, 204, 0.09);       /* dot-grid ink (14px tile) */
  --hud-dotgrid: radial-gradient(var(--hud-dot) 1px, transparent 1px);
  --hud-accent-05: rgba(200, 200, 204, 0.05);   /* faint hover tint */
  --hud-accent-08: rgba(200, 200, 204, 0.08);   /* input fill */
  --hud-accent-12: rgba(200, 200, 204, 0.12);   /* range-thumb fill */
  --hud-accent-50: rgba(200, 200, 204, 0.5);    /* range track */
  --hud-speck: #fff;                            /* greeble dots */
  --hud-glow: 0 0 12px rgba(255, 45, 32, 0.35); /* accent halo — live/selected state only */
  --hud-shadow: 0 0 24px rgba(200, 200, 204, 0.08);              /* panel */
  --hud-shadow-pop: 0 6px 26px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 45, 32, 0.14); /* menus */
  --hud-ring: #cccccf;                          /* keyboard focus */
  --hud-btn-bg: transparent;                    /* buttons are hairline-only here, over the scene */
  /* Ink for the few things that sit on the 3D VIEWPORT rather than on a panel — the brand lockup,
     chiefly. The viewport is dark in every theme, so this one does not follow the palette: under
     Shadcn light, --hud-ink is near-black and the wordmark simply vanished against the canvas. */
  --hud-on-scene: #e6e7e8;

  /* Structure. These are what make a Shadcn theme REACHABLE at all — every one of them was a
     literal in hud.css, and each literal was a piece of the FUI look welded to the markup. */
  --hud-radius: 0px;
  --hud-radius-sm: 0px;
  --hud-notch: 14px;                          /* panel corner cut (clip-path) */
  --hud-notch-sm: 12px;                       /* context menu */
  --hud-bracket: 2px;                         /* the L-brackets on panel corners */
  --hud-blur: 16px;
  --hud-case: uppercase;
  --hud-tracking: 0.22em;                     /* section titles */
  --hud-tracking-ui: 0.14em;                  /* buttons */
  --hud-weight: 600;
  --hud-ornament: 1;                          /* scanlines, page frame, greeble, dot grid */
  --hud-row-h: 22px;                          /* rail/facet row hit target */
  --hud-row-px: 4px;
  --hud-pad: 8px 10px;                        /* panel padding */

  --hud-font: "Rajdhani", system-ui, sans-serif;
  --hud-mono: "Share Tech Mono", ui-monospace, monospace;
}

/* ---- Shadcn (light) — the framework default: white card, zinc hairlines, 0.5rem radius, no glow,
   sentence case, neutral near-black as the accent. Deliberately NOT branded red: "default shadcn"
   is what was asked for, and its accent role is `primary`, which is near-black in this palette. -- */
[data-theme="shadcn"] {
  --hud-bg: hsl(0 0% 100%);
  --hud-glass: hsl(0 0% 100% / 0.92);
  --hud-glass-solid: hsl(0 0% 100%);
  --hud-scrim: hsl(240 10% 3.9% / 0.04);
  --hud-ink: hsl(240 10% 3.9%);               /* foreground */
  --hud-dim: hsl(240 3.8% 46.1%);             /* muted-foreground */
  --hud-accent: hsl(240 5.9% 10%);            /* primary */
  --hud-accent-dim: hsl(240 5.9% 10% / 0.28);
  --hud-hot: hsl(240 5.9% 10%);               /* primary carries "active" here, not a brand red */
  --hud-hot-08: hsl(240 4.8% 95.9%);          /* accent (the hover fill shadcn uses on menu items) */
  --hud-hot-12: hsl(240 4.8% 93%);
  --hud-hot-26: hsl(240 5% 88%);
  --hud-hot-35: hsl(240 5% 84%);
  --hud-hot-60: hsl(240 5.9% 10% / 0.6);      /* glitch text-shadow — primary at the FUI alphas */
  --hud-hot-80: hsl(240 5.9% 10% / 0.8);
  --hud-danger: hsl(0 84.2% 60.2%);           /* destructive */
  --hud-warn: hsl(25 95% 53%);
  --hud-line: hsl(240 5.9% 90%);              /* border */
  --hud-dot: hsl(240 5.9% 90% / 0);           /* no texture — alpha 0 keeps the gradient shape */
  --hud-dotgrid: radial-gradient(var(--hud-dot) 1px, transparent 1px);
  --hud-accent-05: hsl(240 4.8% 95.9%);
  --hud-accent-08: hsl(240 4.8% 95.9%);
  --hud-accent-12: hsl(240 5.9% 90%);
  --hud-accent-50: hsl(240 5.9% 90%);
  --hud-speck: hsl(240 3.8% 46.1%);
  --hud-glow: 0 0 0 hsl(240 5.9% 10% / 0);    /* off, but still a shadow — so it can slide off */
  --hud-shadow: 0 1px 2px hsl(240 10% 3.9% / 0.06), 0 4px 12px hsl(240 10% 3.9% / 0.08);
  --hud-shadow-pop: 0 4px 6px hsl(240 10% 3.9% / 0.05), 0 10px 24px hsl(240 10% 3.9% / 0.12);
  --hud-ring: hsl(240 5% 64.9%);
  --hud-btn-bg: var(--hud-glass);               /* a floating button needs its own surface here */
  --hud-on-scene: #e6e7e8;

  --hud-radius: 0.5rem;
  --hud-radius-sm: 0.375rem;
  --hud-notch: 0px;
  --hud-notch-sm: 0px;
  --hud-bracket: 0px;
  --hud-blur: 8px;
  --hud-case: none;
  --hud-tracking: 0.01em;
  --hud-tracking-ui: 0em;
  --hud-weight: 500;
  --hud-ornament: 0;
  --hud-row-h: 26px;                          /* shadcn breathes — but the rail still has to fit */
  --hud-row-px: 8px;
  --hud-pad: 14px;

  --hud-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hud-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Shadcn (dark) — same geometry, the framework's dark palette. The usable one over a 3D
   viewport, which is why it ships alongside the light default rather than after it. ------------- */
[data-theme="shadcn-dark"] {
  --hud-bg: hsl(240 10% 3.9%);
  --hud-glass: hsl(240 10% 3.9% / 0.92);
  --hud-glass-solid: hsl(240 10% 3.9%);
  --hud-scrim: hsl(240 10% 3.9% / 0.45);
  --hud-ink: hsl(0 0% 98%);
  --hud-dim: hsl(240 5% 64.9%);
  --hud-accent: hsl(0 0% 98%);
  --hud-accent-dim: hsl(0 0% 98% / 0.28);
  --hud-hot: hsl(0 0% 98%);
  --hud-hot-08: hsl(240 3.7% 15.9%);
  --hud-hot-12: hsl(240 3.7% 19%);
  --hud-hot-26: hsl(240 3.7% 26%);
  --hud-hot-35: hsl(240 3.7% 32%);
  --hud-hot-60: hsl(0 0% 98% / 0.6);          /* glitch text-shadow — primary at the FUI alphas */
  --hud-hot-80: hsl(0 0% 98% / 0.8);
  --hud-danger: hsl(0 62.8% 60%);
  --hud-warn: hsl(25 95% 53%);
  --hud-line: hsl(240 3.7% 15.9%);
  --hud-dot: hsl(0 0% 98% / 0);
  --hud-dotgrid: radial-gradient(var(--hud-dot) 1px, transparent 1px);
  --hud-accent-05: hsl(240 3.7% 15.9%);
  --hud-accent-08: hsl(240 3.7% 15.9%);
  --hud-accent-12: hsl(240 3.7% 19%);
  --hud-accent-50: hsl(240 3.7% 26%);
  --hud-speck: hsl(240 5% 64.9%);
  --hud-glow: 0 0 0 hsl(0 0% 98% / 0);
  --hud-shadow: 0 1px 2px hsl(0 0% 0% / 0.3), 0 4px 12px hsl(0 0% 0% / 0.4);
  --hud-shadow-pop: 0 4px 6px hsl(0 0% 0% / 0.3), 0 10px 24px hsl(0 0% 0% / 0.5);
  --hud-ring: hsl(240 4.9% 83.9%);
  --hud-btn-bg: var(--hud-glass);               /* a floating button needs its own surface here */
  --hud-on-scene: #e6e7e8;

  --hud-radius: 0.5rem;
  --hud-radius-sm: 0.375rem;
  --hud-notch: 0px;
  --hud-notch-sm: 0px;
  --hud-bracket: 0px;
  --hud-blur: 8px;
  --hud-case: none;
  --hud-tracking: 0.01em;
  --hud-tracking-ui: 0em;
  --hud-weight: 500;
  --hud-ornament: 0;
  --hud-row-h: 26px;
  --hud-row-px: 8px;
  --hud-pad: 14px;

  --hud-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hud-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- The morph ---------------------------------------------------------------------------------
   Only while `.theming` is on <html>. Named properties, not `all`: `all` would also animate
   layout-affecting things mid-switch (width/height/padding as fonts change) and the whole HUD
   would visibly reflow rather than restyle. !important is load-bearing — several of these elements
   carry their own shorter transition for hover, and the morph has to win for its 450 ms. */
html.theming, html.theming *, html.theming *::before, html.theming *::after {
  transition:
    background-color var(--hud-morph) ease,
    border-color var(--hud-morph) ease,
    color var(--hud-morph) ease,
    box-shadow var(--hud-morph) ease,
    border-radius var(--hud-morph) ease,
    clip-path var(--hud-morph) ease,
    letter-spacing var(--hud-morph) ease,
    opacity var(--hud-morph) ease,
    fill var(--hud-morph) ease,
    stroke var(--hud-morph) ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theming, html.theming *, html.theming *::before, html.theming *::after { transition: none !important; }
}