:root {
  /* Brand Colors */
  --primary: #4F46E5;        /* Indigo 600 */
  --primary-hover: #4338CA;  /* Indigo 700 */
  --primary-light: #EEF2FF;  /* Indigo 50 */
  
  /* Backgrounds & Surfaces */
  --bg-main: #FAFAFA;
  --bg-surface: #FFFFFF;
  --bg-alt: #F3F4F6;         /* Gray 100 */
  
  /* Typography Colors */
  --text-main: #111827;      /* Gray 900 */
  --text-body: #4B5563;      /* Gray 600 */
  --text-muted: #9CA3AF;     /* Gray 400 */
  --text-light: #FFFFFF;
  
  /* Status Colors */
  --success: #10B981;
  --success-bg: #D1FAE5;
  --warning: #F59E0B;
  --error: #EF4444;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --h1-size: clamp(2.25rem, 6vw, 4rem);
  --h2-size: clamp(1.75rem, 5vw, 3rem);
  --h3-size: clamp(1.25rem, 3vw, 1.75rem);
  --body-size: 1rem;
  --small-size: 0.875rem;

  /* Spacing */
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: clamp(1rem, 2vw, 1.5rem);
  --space-8: clamp(1.5rem, 4vw, 2rem);
  --space-12: clamp(2rem, 6vw, 3rem);
  --space-16: clamp(3rem, 8vw, 4rem);
  --space-24: clamp(4rem, 12vw, 6rem);
  --space-32: clamp(5rem, 16vw, 8rem);

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows (Soft & Modern) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 15px rgba(79, 70, 229, 0.3);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
}

/* Base Document Configuration */
html {
  scroll-behavior: smooth;
  font-size: 16px;
}