/* ============================================================
   CSS CUSTOM PROPERTIES — DESIGN TOKENS
============================================================ */
:root {
  --color-bg-primary:   #0A0A0A;
  --color-bg-secondary: #111111;
  --color-bg-card:      #1A1A1A;
  --color-accent:       #C40E91;
  --color-accent-light: #E0159F;
  --color-accent-glow:  rgba(196, 14, 145, 0.3);
  --color-text-primary: #FFFFFF;
  --color-text-muted:   #888888;
  --color-border:       rgba(196, 14, 145, 0.2);
  --font-heading: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --transition-fast: 0.2s ease;
  --transition-med:  0.3s ease;
  --transition-slow: 0.5s ease;
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 50px;
  --container-max: 1200px;
  --container-pad: 24px;
}