/* ══════════════════════════════════
   variables.css — Design Tokens
   ══════════════════════════════════ */

:root {
  /* Colors */
  --bg:          #0a0a0f;
  --surface:     #12121a;
  --surface2:    #1a1a26;
  --accent:      #00d4ff;
  --accent2:     #7b5ea7;
  --accent3:     #ff6b35;
  --text:        #e8e8f0;
  --text-muted:  #7a7a9a;
  --green:       #4ade80;

  /* Borders */
  --border:      rgba(255, 255, 255, 0.07);
  --border-hover:rgba(0, 212, 255, 0.3);

  /* Shadows / Glow */
  --glow:        0 0 40px rgba(0, 212, 255, 0.15);
  --glow-strong: 0 0 50px rgba(0, 212, 255, 0.5);

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

  /* Spacing */
  --section-pad: 6rem 3rem;
  --container:   1100px;

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-pill: 100px;

  /* Transitions */
  --transition:  0.25s ease;
  --transition-slow: 0.7s ease;
}