/* ============================================================
   JOEBEN.SYS — DESIGN TOKENS
   The single source of truth for the visual language.
   Aesthetic: 1996 terminal / CRT monitor. Violet + electric blue
   phosphor on near-black, monospaced type, scanlines + glow.

   Rule: components never hardcode values — they reference these
   tokens. Change a value here and it updates everywhere.
   ============================================================ */


:root{

  /* ---------- COLOR — raw palette ---------- */
  --void:        #0a0817;  /* deepest background (the "off" screen) */
  --screen:      #100c22;  /* raised panel surface */
  --screen-edge: #1a1438;  /* panel borders */
  --violet:      #8b5cf6;  /* primary accent */
  --violet-deep: #5b21b6;  /* pressed / deep accent */
  --blue:        #38bdf8;  /* secondary accent (the "live" cursor blue) */
  --blue-soft:   #60a5fa;  /* status / softer blue */
  --phosphor:    #e3e1fb;  /* lit text — faint violet-white */
  --gray:        #93909f;  /* body copy */
  --gray-dim:    #514c66;  /* rules, dividers, inactive UI */

  /* ---------- COLOR — semantic aliases ----------
     Prefer these in components so intent is readable. */
  --bg:            var(--void);
  --surface:       var(--screen);
  --border:        var(--screen-edge);
  --border-dim:    var(--gray-dim);
  --text:          var(--phosphor);   /* headings, emphasis */
  --text-body:     var(--gray);       /* paragraphs */
  --text-muted:    var(--gray-dim);   /* labels, meta, prompts */
  --accent:        var(--violet);
  --accent-2:      var(--blue);
  --link:          var(--blue);
  --link-hover:    var(--blue-soft);
  --focus-ring:    var(--blue);

  /* status colors */
  --ok:      var(--blue-soft);
  --warn:    #fbbf24;
  --danger:  #f87171;

  /* ---------- GRADIENT + GLOW ---------- */
  --grad:        linear-gradient(120deg, var(--violet) 0%, var(--blue) 100%);
  --glow-text:   0 0 6px rgba(139,92,246,.55), 0 0 22px rgba(56,189,248,.25);
  --glow-soft:   0 0 10px rgba(56,189,248,.45);

  /* ---------- TYPOGRAPHY ---------- */
  --f-display: 'VT323', monospace;                 /* headlines, menu items */
  --f-mono:    'JetBrains Mono', monospace;        /* everything else */

  /* type scale (display uses clamp for fluid hero sizing) */
  --t-h1:   clamp(48px, 11vw, 84px);
  --t-h2:   clamp(28px, 6vw, 40px);
  --t-h3:   22px;      /* menu items, sub-display */
  --t-lede: 17px;
  --t-body: 15px;
  --t-sm:   13px;
  --t-xs:   12px;

  --lh-tight: 1.02;    /* display headlines */
  --lh-body:  1.7;     /* readable mono body */

  --track-tight: .01em;   /* display */
  --track-label: .12em;   /* uppercase labels */
  --track-eyebrow: .18em; /* eyebrow */

  /* ---------- SPACING (4px base) ---------- */
  --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: 64px;
  --space-10: 80px;

  /* ---------- SIZING ---------- */
  --measure: 46ch;     /* ideal reading width for lede/paragraphs */
  --shell-max: 780px;  /* main column width */

  /* ---------- BORDERS + RADIUS ---------- */
  --bw: 1px;
  --bw-accent: 2px;    /* roster left-rule, emphasis */
  --radius-sm: 2px;
  --radius:    3px;

  /* ---------- MOTION ---------- */
  --dur-fast: .15s;
  --dur:      .3s;
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --blink:    1.05s;   /* cursor blink cadence */
  --flicker:  6.5s;    /* CRT flicker cadence */

  /* ---------- ELEVATION (z-index) ---------- */
  --z-overlay:  50;    /* scanlines */
  --z-vignette: 49;    /* vignette darkening */
  --z-content:  1;
}