:root {
  /* Colors — brand */
  --purple-light: #CEC2FD;
  --purple: #B2A1FE;
  --yellow: #FFD666;
  --lime: #CBEE4C;
  --orange: #FC8101;
  --dark: #222222;
  --bg-light: #F1F0F4;
  --white: #FFFFFF;

  /* Derived colors */
  --purple-dark: #9580F0;
  --text-secondary: #555555;
  --border: #E0DDE6;
  --shadow-color: rgba(0, 0, 0, 0.08);
  --shadow-color-hover: rgba(0, 0, 0, 0.14);

  /* Typography */
  --font-heading: 'Dela Gothic One', cursive;
  --font-body: 'Inter', sans-serif;

  --text-hero: clamp(2rem, 5vw + 1rem, 3.75rem);
  --text-h2: clamp(1.75rem, 4vw + 0.5rem, 3rem);
  --text-h3: clamp(1.25rem, 2vw + 0.5rem, 1.5rem);
  --text-body: clamp(1rem, 0.5vw + 0.875rem, 1.25rem);
  --text-caption: 0.875rem;
  --text-small: 0.75rem;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --section-gap: clamp(64px, 10vw, 120px);

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: 0 4px 20px var(--shadow-color);
  --shadow-card-hover: 0 8px 32px var(--shadow-color-hover);
  --shadow-button: 0 4px 12px rgba(178, 161, 254, 0.3);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container-max: 1200px;
  --container-padding: var(--space-4);
}

@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: var(--space-8);
  }
}