/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* Brand Colors */
  --color-primary: #C026D3;
  --color-secondary: #EC4899;
  --color-accent: #F97316;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #C026D3, #EC4899, #F97316);
  --gradient-brand-hover: linear-gradient(135deg, #a21caf, #db2777, #ea6c10);

  /* Backgrounds */
  --color-bg: #FAFAFA;
  --color-bg-alt: #F4F4F6;
  --color-bg-soft: #FDF4FF;
  --color-dark: #0F0A1A;
  --color-darker: #080510;

  /* Text */
  --color-text: #0F0A1A;
  --color-body: #4B5563;
  --color-label: #6B7280;
  --color-border: #E5E7EB;
  --color-white: #FFFFFF;

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Spacing */
  --section-py: 80px;
  --section-py-mobile: 48px;
  --max-w: 1200px;
  --container-px: 24px;

  /* Components */
  --radius-card: 16px;
  --radius-sm: 8px;
  --radius-pill: 50px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-hover: 0 8px 32px rgba(192,38,211,0.12), 0 2px 8px rgba(0,0,0,0.08);
  --shadow-glow: 0 4px 20px rgba(192,38,211,0.3);
  --shadow-glow-lg: 0 8px 40px rgba(192,38,211,0.35);

  /* Transitions */
  --transition: all 0.3s ease;
  --transition-fast: all 0.2s ease;
}