/* ─────────────────────────────────────────
   variables.css — Design tokens & theme
───────────────────────────────────────── */

:root {
  /* Backgrounds */
  --bg:       #080c14;
  --bg2:      #0d1320;
  --bg3:      #111827;

  /* Surfaces */
  --surface:  rgba(255,255,255,0.04);
  --surface2: rgba(255,255,255,0.07);

  /* Borders */
  --border:   rgba(255,255,255,0.08);
  --border2:  rgba(255,255,255,0.14);

  /* Text */
  --text:     #f0f4ff;
  --text2:    #8b96b0;
  --text3:    #4a5568;

  /* Accent palette */
  --accent:   #4f8eff;
  --accent2:  #7c3aed;
  --accent3:  #06d6a0;
  --accent4:  #f72585;
  --accent5:  #ffd60a;

  /* Glow */
  --glow:     rgba(79,142,255,0.18);
  --glow2:    rgba(124,58,237,0.15);

  /* Typography */
  --mono:     'Space Mono', monospace;
  --sans:     'Syne', sans-serif;

  /* Layout */
  --radius:   12px;
  --radius2:  20px;
  --nav-h:    68px;

  /* Motion */
  --transition: 0.25s cubic-bezier(.4,0,.2,1);
}

/* ── Light theme overrides ── */
[data-theme="light"] {
  --bg:       #f5f7ff;
  --bg2:      #eef1fb;
  --bg3:      #e8ecf8;
  --surface:  rgba(0,0,0,0.04);
  --surface2: rgba(0,0,0,0.07);
  --border:   rgba(0,0,0,0.09);
  --border2:  rgba(0,0,0,0.16);
  --text:     #0f1729;
  --text2:    #4a5568;
  --text3:    #8b96b0;
  --glow:     rgba(79,142,255,0.12);
  --glow2:    rgba(124,58,237,0.10);
}