/* ═══════════════════════════════════════
   variables.css — Design tokens & theme
═══════════════════════════════════════ */
:root {
  /* Colors */
  --bg:       #020812;
  --surface:  #07111f;
  --card:     #0b1828;
  --border:   rgba(0, 200, 255, 0.12);

  --accent:   #00c8ff;
  --accent2:  #7b4fff;
  --accent3:  #00ffc8;

  --text:     #e8f4ff;
  --muted:    #6a8eaa;

  /* Glows */
  --glow:     0 0 40px rgba(0, 200, 255, 0.18);
  --glow2:    0 0 60px rgba(123, 79, 255, 0.18);
  --glow-btn: 0 0 30px rgba(0, 200, 255, 0.35), 0 0 60px rgba(123, 79, 255, 0.18);

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Spacing */
  --section-pad: 100px;
  --wrap-max:    1200px;
  --side-pad:    5%;

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  /* Transitions */
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
  --transition: 0.3s var(--ease-out);
}