/* ═══════════════════════════════════════════════════════════════════════════
   Design tokens — the 101huntersqn.com palette and type, adapted for a
   dense operations UI. Change colours here, never in component CSS.

   Themes (css/themes.css) only override the BASE colours in the first block;
   every tint, line, glow and gradient below is derived from them with
   color-mix(), so a theme is ~20 lines and can never miss a component.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── base colours (themes override these) ─────────────────────────────── */
  /* surfaces (darkest → lightest) */
  --bg:            #050508;
  --bg-2:          #0a0c18;
  --surface:       #0d1021;
  --surface-2:     #121630;
  --surface-3:     #151a2e;
  --surface-hover: #1a2040;

  /* brand: --gold = primary accent (headings, lines), --orange/--fire = action / afterburner */
  --gold:          #d4a020;
  --gold-light:    #f0c040;
  --orange:        #ff6b35;
  --fire:          #ff4500;

  /* text */
  --text:          #ffffff;
  --text-2:        #c0c5d0;
  --muted:         #6b7280;
  --faint:         #3a4055;
  --on-accent:     #050508;     /* text on a solid --gold background */
  --on-fire:       #ffffff;     /* text on the --grad-fire primary button */
  --ink:           #ffffff;     /* neutral used for faint highlights (white on dark, black on light) */

  /* status */
  --ok:            #22c55e;
  --warn:          #f59e0b;
  --danger:        #ef4444;
  --info:          #38bdf8;
  --ok-text:       #86efac;
  --warn-text:     #fcd34d;
  --danger-text:   #fca5a5;
  --info-text:     #7dd3fc;
  --blue-side:     #4d8dff;
  --red-side:      #ff4d4d;

  /* ── derived (do not override in themes) ──────────────────────────────── */
  --gold-a10:      color-mix(in srgb, var(--gold) 10%, transparent);
  --gold-a20:      color-mix(in srgb, var(--gold) 20%, transparent);
  --gold-a35:      color-mix(in srgb, var(--gold) 35%, transparent);
  --fire-a15:      color-mix(in srgb, var(--orange) 15%, transparent);
  --ok-a15:        color-mix(in srgb, var(--ok) 15%, transparent);
  --warn-a15:      color-mix(in srgb, var(--warn) 15%, transparent);
  --danger-a15:    color-mix(in srgb, var(--danger) 15%, transparent);
  --info-a15:      color-mix(in srgb, var(--info) 15%, transparent);

  --line:          color-mix(in srgb, var(--gold) 12%, transparent);
  --line-strong:   color-mix(in srgb, var(--gold) 30%, transparent);
  --line-neutral:  color-mix(in srgb, var(--ink) 6%, transparent);
  --row-hover:     color-mix(in srgb, var(--ink) 2.5%, transparent);

  --grad-gold:     linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  --grad-fire:     linear-gradient(135deg, var(--orange) 0%, var(--fire) 100%);
  --grad-panel:    linear-gradient(180deg, color-mix(in srgb, var(--surface-3) 65%, transparent) 0%,
                                           color-mix(in srgb, var(--surface) 65%, transparent) 100%);
  --chrome-top:    color-mix(in srgb, var(--bg) 78%, transparent);        /* top bar (blurred) */
  --chrome-side:   linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent),
                                           color-mix(in srgb, var(--bg) 96%, transparent));
  --nav-active:    linear-gradient(90deg, color-mix(in srgb, var(--orange) 16%, transparent), var(--gold-a10) 140%);

  /* ── type ─────────────────────────────────────────────────────────────── */
  --font-display:  'Orbitron', 'Segoe UI', sans-serif;
  --font-body:     'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', Consolas, monospace;
  --fs-xs: 0.72rem;  --fs-sm: 0.82rem;  --fs-md: 0.9rem;  --fs-lg: 1.05rem;
  --fs-xl: 1.3rem;   --fs-2xl: 1.7rem;  --fs-3xl: 2.2rem;

  /* ── geometry ─────────────────────────────────────────────────────────── */
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 12px;  --r-full: 9999px;
  --cut: 14px;                 /* chamfer size of HUD panels */
  --sidebar-w: 248px;
  --topbar-h: 64px;
  --gap: 20px;

  /* ── motion ───────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-fast: 120ms;  --t: 200ms;

  --shadow:        0 8px 32px rgba(0, 0, 0, 0.35);
  --glow-fire:     0 0 24px color-mix(in srgb, var(--orange) 35%, transparent);
  --glow-gold:     0 0 18px color-mix(in srgb, var(--gold) 25%, transparent);
  color-scheme: dark;
}