:root {

  /* ─── Color ────────────────────────────────────────────── */
  --color-bg-base:       #0A0A0A;
  --color-bg-surface:    #111111;
  --color-bg-elevated:   #1A1A1A;
  --color-border:        #2A2A2A;
  --color-border-bright: #3A3A3A;

  --color-text-primary:  #F0F0F0;
  --color-text-muted:    #666666;
  --color-text-faint:    #333333;

  --color-accent-primary:   #FF4500;
  --color-accent-secondary: #00C8FF;

  --color-critical: #FF0040;
  --color-warning:  #FFB800;
  --color-success:  #00C851;

  /* ─── Typography ───────────────────────────────────────── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ─── Type Scale ───────────────────────────────────────── */
  --text-display: clamp(64px, 10vw, 96px);
  --text-h1:      clamp(48px, 7vw,  64px);
  --text-h2:      clamp(32px, 5vw,  48px);
  --text-h3:      clamp(22px, 3vw,  32px);
  --text-h4:      24px;
  --text-lg:      18px;
  --text-base:    16px;
  --text-sm:      14px;
  --text-xs:      12px;

  /* ─── Spacing ──────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;
  --space-24:  96px;
  --space-32:  128px;

  /* ─── Radius ───────────────────────────────────────────── */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   4px;

  /* ─── Effects ──────────────────────────────────────────── */
  --glow-orange: 0 0 24px rgba(255, 69,  0,   0.25);
  --glow-cyan:   0 0 24px rgba(0,   200, 255, 0.20);
  --glow-subtle: 0 0 12px rgba(255, 255, 255, 0.04);

  /* ─── Motion ───────────────────────────────────────────── */
  --duration-fast:   100ms;
  --duration-base:   200ms;
  --duration-slow:   400ms;
  --easing-default:  ease-out;
}