/* CSS Variables and Custom Properties */
:root {
  /* Colors */
  --clr-blue-700: #1746a2;
  --clr-blue-600: #1c56fe;
  --clr-blue-500: #4478ff;
  --clr-blue-100: #eef3ff;
  --clr-blue-50: #f6f8ff;
  
  --clr-green: #00c48c;
  --clr-green-bg: #e8faf3;
  
  --clr-pink: #f0386b;
  --clr-pink-bg: #fdedf1;
  
  --clr-orange: #ff9f43;
  --clr-orange-bg: #fff4e6;
  
  --clr-purple: #7c5cfc;
  --clr-purple-bg: #f0edff;
  
  /* Backgrounds */
  --clr-bg: #ffffff;
  --clr-surface: #ffffff;
  --clr-surface-alt: #f7f8fa;
  
  /* Text Colors */
  --clr-text: #111827;
  --clr-text-secondary: #4b5563;
  --clr-text-muted: #9ca3af;
  
  /* Borders */
  --clr-border: #e5e7eb;
  --clr-border-light: #f0f1f3;
  
  /* Typography */
  --font-display: 'Outfit', 'DM Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  
  /* Radius */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .06), 0 0 1px rgba(0, 0, 0, .08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, .08), 0 0 1px rgba(0, 0, 0, .1);
  --shadow-xl: 0 16px 50px rgba(0, 0, 0, .1), 0 0 1px rgba(0, 0, 0, .1);
  
  /* Layout */
  --max-w: 1120px;
}