:root {
  --purple: #4A0374;
  --yellow: #F9A620;
  --white: #F4F4F9;

  /* Background gradient (from your image) */
  --bg1: #4A0C4D;
  --bg2: #330941;
  --bg3: #190633;
  --lineargradient: linear-gradient(135deg, var(--bg1) 0%, var(--bg3) 70%);

  /* UI tokens */
  --text: rgba(244, 244, 249, 0.95);
  --muted: rgba(244, 244, 249, 0.75);
  --line: rgba(244, 244, 249, 0.14);

  --card: rgba(255, 255, 255, 0.08);
  --card-strong: rgba(255, 255, 255, 0.12);

  --radius: 16px;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.35);

  --max: 1120px;
  --padX: 1.5rem;
  --sectionY: clamp(2.25rem, 4vw, 4rem);
}

/* ========== Desktop Optimization (1920px+) ========== */
@media (min-width: 1920px) {
  :root {
    --max: 1360px;
    --padX: 2.5rem;
    --sectionY: clamp(3rem, 5vw, 5rem);
  }
}