/* CSS Variables & Design System Tokens - Premium White/Cream & Dark Teal Light Theme */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Color Palette - Premium White/Cream & Deep Dark Teal Theme */
  --color-primary-dark: #FDFBF7;     /* Premium soft Ivory/Cream background */
  --color-primary-card: #FFFFFF;     /* Pure crisp white for card highlights */
  --color-primary-surface: #F5F2EB;  /* Rich warm cream for secondary blocks / sections */
  
  --color-text-primary: #0F252C;     /* Deep slate dark teal for maximum contrast and legibility */
  --color-text-secondary: #475569;   /* Muted corporate slate-gray */
  --color-text-muted: #7A9097;       /* Soft teal-gray */
  
  /* Accent Dark Teal & Slate Blue colors (Absolutely NO gold or yellow) */
  --color-accent: #0D6B6B;           /* Deep elegant dark teal */
  --color-accent-hover: #074E4E;     /* Darker corporate teal for hovers */
  --color-accent-light: #F0FDFA;     /* Very soft turquoise-teal tint */
  --color-accent-glow: rgba(13, 107, 107, 0.08);
  
  /* Feedback and secondary accents (No yellow anywhere!) */
  --color-success: #059669;          /* Emerald Green for successes/badges */
  --color-success-light: #D1FAE5;    /* Soft emerald green tint */
  --color-success-glow: rgba(5, 150, 105, 0.1);
  
  --color-info: #0284C7;             /* Clean sky-blue for informational features */
  --color-info-glow: rgba(2, 132, 199, 0.1);
  
  /* Glassmorphism & Frosted effects customized for Premium Light Mode */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(13, 107, 107, 0.08);
  --glass-border-hover: rgba(13, 107, 107, 0.16);
  --glass-blur: blur(16px);
  
  /* Typography */
  --font-headings: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Dynamic Spacing scale */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  --spacing-section: clamp(4rem, 8vw, 8rem);
  
  /* Container Widths */
  --container-max-width: 1280px;
  
  /* Shadow Systems for Light Mode */
  --shadow-sm: 0 1px 2px 0 rgba(13, 107, 107, 0.03);
  --shadow-md: 0 4px 6px -1px rgba(13, 107, 107, 0.06), 0 2px 4px -1px rgba(13, 107, 107, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(13, 107, 107, 0.08), 0 4px 6px -2px rgba(13, 107, 107, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(13, 107, 107, 0.1), 0 10px 10px -5px rgba(13, 107, 107, 0.05);
  --shadow-card-glow: 0 0 30px -5px rgba(13, 107, 107, 0.06);
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-round: 9999px;
  
  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}