/* ══════════════════════════════════════════════════════════════════════════════
   APEX · Design Tokens
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Core Palette ──────────────────────────────────────────────────────────── */
  --bg:           #080c12;
  --bg2:          #0d1420;
  --bg3:          #111928;
  --panel:        rgba(20, 29, 46, 0.85);
  --panel-solid:  #141d2e;
  --panel2:       #1a2540;
  --border:       #1e2d47;
  --border2:      #2a3d5e;

  /* ── Accent Colors ─────────────────────────────────────────────────────────── */
  --teal:         #00e5c8;
  --teal2:        #00b8a0;
  --teal-dim:     rgba(0,229,200,0.12);
  --teal-glow:    rgba(0,229,200,0.25);
  --teal-glow2:   rgba(0,229,200,0.08);

  --gold:         #f0a500;
  --gold2:        #c8860a;
  --gold-dim:     rgba(240,165,0,0.12);

  --red:          #ff4060;
  --red-dim:      rgba(255,64,96,0.12);

  --green:        #00e064;
  --green-dim:    rgba(0,224,100,0.1);

  --blue:         #4d9fff;
  --blue-dim:     rgba(77,159,255,0.1);

  /* ── Text ──────────────────────────────────────────────────────────────────── */
  --text:         #c8d8ef;
  --text2:        #7a93b8;
  --text3:        #445972;
  --white:        #eef4ff;

  /* ── Typography ────────────────────────────────────────────────────────────── */
  --font-head:    'Inter', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --font-body:    'Inter', sans-serif;

  /* ── Spacing & Shape ───────────────────────────────────────────────────────── */
  --radius:       8px;
  --radius2:      14px;
  --radius3:      20px;

  /* ── Motion ────────────────────────────────────────────────────────────────── */
  --trans:        0.22s ease;
  --trans-slow:   0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --spring:       0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Glassmorphism ─────────────────────────────────────────────────────────── */
  --glass-bg:     rgba(20, 29, 46, 0.65);
  --glass-border: rgba(255,255,255,0.06);
  --glass-blur:   blur(20px);

  /* ── Shadows ───────────────────────────────────────────────────────────────── */
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.2);
  --shadow-md:    0 4px 20px rgba(0,0,0,0.25);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.35);
  --shadow-glow:  0 0 30px rgba(0,229,200,0.15);
}