/* ═══════════════════════════════════════════
   HQ Design Tokens
   Single source of truth for all design values.
   Import this first — all other CSS files depend on it.
   ═══════════════════════════════════════════ */

:root {
  /* ── Colors ────────────────────────────────── */
  --color-bg:         #0C0A09;
  --color-panel:      #151311;
  --color-panel2:     #1a1715;
  --color-border:     #252219;

  --color-text:       #E8E2D9;
  --color-dim:        #8A8074;
  --color-muted:      #4A4238;

  --color-amber:      #D4A017;
  --color-amber-dim:  #D4A01722;
  --color-amber-glow: #D4A01744;

  --color-green:      #5CB85C;
  --color-red:        #E85555;
  --color-blue:       #4A9EE8;
  --color-orange:     #E8943A;
  --color-purple:     #9B6DD7;
  --color-pink:       #E86A92;
  --color-teal:       #4AC9D4;

  /* ── Font stacks ───────────────────────────── */
  --font-body:    'Outfit', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Font sizes ────────────────────────────── */
  --text-xs:   9px;
  --text-sm:   10px;
  --text-base: 12px;
  --text-md:   13px;
  --text-lg:   14px;
  --text-xl:   16px;
  --text-2xl:  20px;
  --text-3xl:  24px;
  --text-4xl:  30px;

  /* ── Spacing scale (4px base) ──────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;

  /* ── Border radius ─────────────────────────── */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;

  /* ── Transitions ───────────────────────────── */
  --transition-fast:   0.1s ease;
  --transition-base:   0.15s ease;
  --transition-slow:   0.25s ease;

  /* ── Shadows ───────────────────────────────── */
  --shadow-amber: 0 0 6px #D4A01744;
  --shadow-green: 0 0 6px #5CB85C88;
  --shadow-red:   0 0 6px #E8555588;
}