/* ========================================
   Design Tokens — Custom Properties
   ======================================== */

:root {
  /* Backgrounds — Phantom-style layered darks */
  --bg-primary: #0A0A0F;
  --bg-secondary: #111118;
  --bg-surface: #1A1A24;
  --bg-elevated: #222230;

  /* Brand */
  --accent: #8230D2;
  --accent-light: #A855F7;
  --accent-blue: #3B82F6;
  --accent-green: #10B981;
  --accent-gold: #F59E0B;
  --gradient: linear-gradient(135deg, #8230D2, #A855F7);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-blur: 12px;

  /* Glow */
  --glow-purple: rgba(130, 48, 210, 0.15);
  --glow-blue: rgba(59, 130, 246, 0.15);
  --glow-green: rgba(16, 185, 129, 0.15);
  --glow-gold: rgba(245, 158, 11, 0.15);

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #A0A0B8;
  --text-muted: #6B6B80;

  /* Border */
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);

  /* Spacing */
  --section-pad: clamp(60px, 8vw, 120px);
  --container-max: 1200px;
  --container-pad: 24px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Typography — fluid */
  --font: 'Switzer', system-ui, sans-serif;
  --text-hero: clamp(3rem, 6vw, 5rem);
  --text-section: clamp(2rem, 4vw, 3rem);
  --text-body: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
}