/* ── DESIGN TOKENS ─────────────────────────────── */
:root {
  /* Background */
  --ink:    #08080e;
  --ink2:   #0d0d18;
  --glass:  rgba(255, 255, 255, 0.03);
  --glass2: rgba(255, 255, 255, 0.06);

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

  /* Brand colors */
  --violet:  #7c5cfc;
  --violet2: #a78bfa;
  --blue:    #4f9eff;
  --pink:    #f472b6;
  --green:   rgba(74, 222, 128, 0.9);

  /* Text */
  --text:   #f8f7ff;
  --muted:  rgba(248, 247, 255, 0.45);
  --muted2: rgba(248, 247, 255, 0.65);

  /* Spacing scale */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  60px;
  --space-2xl: 120px;

  /* Radius */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill: 100px;

  /* Shadows */
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 30px rgba(124, 92, 252, 0.4);
  --shadow-glow-lg: 0 0 60px rgba(124, 92, 252, 0.25);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --t-fast: 0.2s;
  --t-med:  0.4s;
  --t-slow: 0.7s;
}