:root,
html:root {
  --bg-base: #0D0B14;
  --bg-surface: #1B1626;
  --border-subtle: #2E2440;
  --purple-deep: #5B21B6;
  --purple-primary: #8B5CF6;
  --purple-glow: #C4B5FD;
  --text-primary: #F5F3FA;
  --text-secondary: #A9A0BD;
  --accent-optional: #F2C94C;

  --accent-rgb: 139, 92, 246;
  --accent-hot-rgb: 196, 181, 253;
  --cta-rgb: 139, 92, 246;

  --orange: var(--purple-primary);
  --orange-dark: var(--purple-deep);
  --orange-glow: rgba(196, 181, 253, 0.32);
  --orange-soft: rgba(139, 92, 246, 0.12);
  --orange-border: rgba(196, 181, 253, 0.38);

  --green: var(--purple-primary);
  --green-dark: var(--purple-deep);
  --green-glow: rgba(196, 181, 253, 0.34);

  --bg: var(--bg-base);
  --bg2: var(--bg-surface);
  --bg3: #14101D;

  --glass-bg: rgba(27, 22, 38, 0.72);
  --glass-border: rgba(46, 36, 64, 0.92);
  --text: var(--text-primary);
  --text-muted: var(--text-secondary);
  --text-dim: #6F6680;
  --border: var(--border-subtle);
  --rating-accent: var(--accent-optional);
  --testi-avatar-bg: linear-gradient(135deg, var(--purple-primary), var(--purple-deep));

  --font-body: 'Inter', Arial, sans-serif;
  --font-display: 'Sora', 'Poppins', Arial, sans-serif;

  --hero-bg:
    radial-gradient(ellipse 70% 42% at 20% 12%, rgba(196, 181, 253, 0.14) 0%, transparent 62%),
    radial-gradient(ellipse 60% 44% at 86% 18%, rgba(91, 33, 182, 0.28) 0%, transparent 64%),
    linear-gradient(135deg, var(--bg-base) 0%, #171026 48%, var(--purple-deep) 100%);
  --hero-overlay-bg: linear-gradient(180deg, rgba(13, 11, 20, 0.08) 0%, rgba(13, 11, 20, 0.58) 100%);
  --hero-bottom-glow: radial-gradient(ellipse 74% 48% at 50% 110%, rgba(196, 181, 253, 0.16) 0%, transparent 72%);
  --cta-final-bg:
    radial-gradient(ellipse 80% 58% at 50% 0%, rgba(196, 181, 253, 0.12) 0%, transparent 62%),
    linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-base) 100%);
}