:root {
  --color-primary: #3C3CB9;
  --color-accent: #EB3599;
  --color-dark: #000A20;
  --color-dark-accent: #111827;
  --color-white: #FFFFFF;
  --color-light: #F5F5F5;
  --color-light-accent: #1f2937;
  --color-transparent: transparent;
  --color-text: #333333;
  --color-text-light: #9ca3af;
  
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;
  
  --font-size-base: 16px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;
  
  --border-radius: 8px;
  --transition: 0.3s ease;
}