:root {
  /* Colors */
  --bg:          #080810;
  --bg-2:        #0d0d1a;
  --bg-3:        #111124;
  --surface:     rgba(255,255,255,0.04);
  --surface-2:   rgba(255,255,255,0.07);
  --border:      rgba(255,255,255,0.08);
  --border-2:    rgba(255,255,255,0.14);

  --text:        #f0f0fa;
  --text-2:      #9898b8;
  --text-3:      #5a5a80;

  --accent:      #7b61ff;
  --accent-2:    #a78bfa;
  --accent-glow: rgba(123, 97, 255, 0.35);

  --cyan:        #22d3ee;
  --cyan-glow:   rgba(34, 211, 238, 0.25);

  --green:       #4ade80;
  --red:         #f87171;
  --yellow:      #fbbf24;

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-serif:   'Instrument Serif', serif;
  --font-mono:    'DM Mono', monospace;

  /* Spacing */
  --section-pad: clamp(80px, 10vw, 140px);
  --content-width: 1200px;
  --content-pad: clamp(20px, 5vw, 60px);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --transition: 0.4s var(--ease-out);
}