:root {
  --color-royal: #5b3fd1;
  --color-mystic: #4da8ff;
  --color-emerald: #34c77b;
  --color-golden: #ffc857;
  --color-pink: #ff7bcb;
  --color-cyan: #7cf5ff;
  --color-navy: #1e2238;
  --color-moon: #f5f7ff;
  --color-arcane: #8b5cf6;
  --color-mint: #98f5c9;
  --color-coral: #ff8a5b;

  --gradient-magic: linear-gradient(
    135deg,
    var(--color-royal) 0%,
    var(--color-mystic) 45%,
    var(--color-pink) 100%
  );
  --gradient-gold: linear-gradient(135deg, #ffc857 0%, #ff8a5b 100%);
  --gradient-glass: linear-gradient(
    145deg,
    rgba(245, 247, 255, 0.92) 0%,
    rgba(245, 247, 255, 0.72) 100%
  );

  --font-display: "Cinzel", "Times New Roman", serif;
  --font-body: "Outfit", system-ui, sans-serif;

  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  --space-sm: clamp(0.75rem, 1.5vw, 1rem);
  --space-md: clamp(1rem, 2vw, 1.5rem);
  --space-lg: clamp(1.5rem, 3vw, 2.5rem);
  --space-xl: clamp(2.5rem, 5vw, 4rem);
  --space-2xl: clamp(4rem, 8vw, 7rem);

  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;

  --shadow-soft: 0 8px 32px rgba(91, 63, 209, 0.12);
  --shadow-glow: 0 0 40px rgba(124, 245, 255, 0.25);
  --shadow-card: 0 16px 48px rgba(30, 34, 56, 0.1);

  --header-h: 4.5rem;
  --container: min(72rem, 92vw);
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0.01ms;
  }
}