/* ================================================
   CALIDORN — CASSETTE FUTURISM DESIGN SYSTEM
   Version 1.0 | March 2026
   ================================================
   Single source of truth for all CSS custom properties.
   Individual views duplicate this :root block in their inline <style>.
   To serve: import as text module in worker.js at /static/tokens.css,
   or inject as a <style> block via the shell.
*/

:root {
  /* ── Background / Surface ──────────────────────────────────────────────── */
  --void:          #1A1510;   /* Void Black — page-level background */
  --deep-navy:     #1E1C18;   /* Rubber Black — nav bars, sticky headers */
  --midnight:      #2A2520;   /* Dark Panel — cards, terminal panels */
  --navy-mid:      #32302A;   /* Elevated — hover states, active cards */

  /* ── Cassette Futurism extended surfaces ────────────────────────────── */
  --cream:         #E8E0D0;   /* Primary light section background */
  --beige:         #D4C9B0;   /* Secondary light surface */
  --panel-light:   #C8BFAD;   /* Mid-tone plastic panels */

  /* ── Accent / Glow colours ─────────────────────────────────────────── */
  --amethyst:      #F0A020;   /* Amber Glow — primary CRT accent */
  --amethyst-glow: rgba(240, 160, 32, 0.35);
  --amethyst-dim:  rgba(138, 82, 8, 0.35);
  --amethyst-text: #F0A020;   /* Amber Glow — accent text */
  --amber:         #D4820A;   /* Amber — borders, active states */
  --amber-dim:     #8A5208;   /* Amber Dim — inactive, secondary borders */
  --cyan:          #3DBA4E;   /* Phosphor Green — status, success */
  --cyan-glow:     rgba(61, 186, 78, 0.3);
  --cyan-dim:      rgba(61, 186, 78, 0.15);
  --phosphor:      #3DBA4E;   /* Alias for phosphor green */
  --phosphor-dim:  #1A5C24;   /* Inactive phosphor */
  --red-led:       #CC2200;   /* Power indicators, alerts */
  --tape-brown:    #5C3D1E;   /* Cassette housing colour */

  /* ── Neutral / Text ────────────────────────────────────────────────── */
  --mist:          #E8E0D0;   /* Cream — primary text on dark */
  --muted:         #6A6258;   /* Warm mid-grey — labels, captions */
  --shadow-border: #3A3530;   /* Dark border — dividers on dark surfaces */
  --text-on-dark:  #E8E0D0;   /* Cream Text */
  --text-on-light: #2A2520;   /* Body Text on cream/beige */

  /* ── Borders ───────────────────────────────────────────────────────── */
  --border-cyan:   rgba(0, 200, 255, 0.18);  /* Faint cyan — card borders */
  --border-dark:   #3A3530;   /* Dividers on dark surfaces */
  --border-light:  #B8AE9C;   /* Warm Gray — borders on light surfaces */

  /* ── Semantic status ───────────────────────────────────────────────── */
  --success:       #3DBA4E;   /* Phosphor Green */
  --warning:       #F0A020;   /* Amber Glow */
  --danger:        #CC2200;   /* Red LED */

  /* ── Typography ────────────────────────────────────────────────────── */
  --font-heading:  'VT323', monospace;
  --font-body:     'Courier Prime', 'Courier New', monospace;
  --font-code:     'Share Tech Mono', monospace;
  --font-label:    'Share Tech Mono', monospace;
  --font-fallback: 'IBM Plex Mono', monospace;

  /* ── Spacing (base-4 scale) ────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  56px;
  --space-10: 64px;

  /* ── Border Radius ─────────────────────────────────────────────────── */
  --radius-xs:   2px;   /* Inputs, badges */
  --radius-sm:   4px;   /* Cards, panels */
  --radius-md:   6px;   /* Cassette/hardware max */
  --radius-none: 0px;   /* Buttons (use clip-path) */

  /* ── Glows ─────────────────────────────────────────────────────────── */
  --glow-amber:    0 0 12px rgba(240, 160, 32, 0.6);
  --glow-amber2:   0 0 24px rgba(240, 160, 32, 0.2);
  --glow-phosphor: 0 0 10px rgba(61, 186, 78, 0.6);
  --glow-red:      0 0 6px #CC2200;

  /* ── Transitions ───────────────────────────────────────────────────── */
  --trans-fast: 150ms ease-out;
  --trans-base: 200ms ease;
  --trans-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 200ms ease;

  /* ── Layout ────────────────────────────────────────────────────────── */
  --nav-height:  56px;
  --tab-height:  44px;
  --max-width:   1200px;

  /* ── Legacy aliases ─────────────────────────────────────────────── */
  --fire:        #F0A020;   /* Alias for --amethyst; used in calculator.html */
  --text-dim:    #6A6258;   /* Alias for --muted; used in calculator.html */
}