@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Color Palette - Logo matching */
  --primary-orange: hsl(24, 95%, 50%);
  --primary-orange-rgb: 243, 112, 33;
  --primary-purple: hsl(295, 60%, 40%);
  --primary-purple-rgb: 155, 39, 138;
  
  /* Background Colors */
  --bg-light: hsl(210, 20%, 98%);
  --bg-white: hsl(0, 0%, 100%);
  --bg-dark: hsl(220, 25%, 9%);
  --bg-dark-card: hsl(220, 25%, 14%);
  
  /* Text Colors */
  --text-dark: hsl(220, 20%, 15%);
  --text-muted: hsl(220, 10%, 45%);
  --text-light: hsl(0, 0%, 100%);
  --text-light-muted: hsl(220, 10%, 80%);
  
  /* Borders and Blurs (Glassmorphism) */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-dark: rgba(20, 22, 28, 0.7);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-border-dark: rgba(255, 255, 255, 0.05);
  --glass-blur: 16px;
  
  /* Fonts */
  --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Theme Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px rgba(243, 112, 33, 0.25);
  --shadow-glow-purple: 0 0 20px rgba(155, 39, 138, 0.25);
  
  /* Animation Timing */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Layout constraints */
  --max-width: 1280px;
  --header-height: 80px;
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
}

/* Base Light Mode Styles */
body {
  background-color: var(--bg-light);
  color: var(--text-dark);
  font-family: var(--font-main);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}