/* 
 * dA1ly Design System Tokens
 * Based on docs/design/DESIGN_SYSTEM.md
 * Luxury Theme (Space Indigo + Grapefruit Pink)
 */

:root {
  /* === Colors (Bluetooino-inspired with Luxury Blue) === */
  
  /* Primary: Luxury Blue #1D2037 (replaces Bluetooino blue) */
  --color-primary: #1D2037;
  --color-primary-dark: #15182B;
  --color-primary-light: #2D304D;
  --color-primary-lighter: #3D4063;
  
  /* Secondary/Accent: Keep pink for highlights */
  --color-secondary: #FF6B6B;
  --color-secondary-dark: #E55A5A;
  --color-secondary-light: #FF8A8A;
  
  /* Background colors - Light theme like Bluetooino */
  --color-bg-darkest: #0E1020;
  --color-bg-dark: #1D2037;
  --color-bg-darker: #15182B;
  --color-surface: #FFFFFF;
  --color-surface-light: #F8F9FC;
  --color-surface-lighter: #F0F2F8;
  
  /* Light backgrounds - Clean white like Bluetooino */
  --color-bg-light: #FFFFFF;
  --color-bg-lighter: #F8F9FC;
  --color-bg-lightest: #F0F2F8;
  --color-surface-white: #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  
  /* Text colors for dark backgrounds (nav/footer only) */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #BDC0D7;
  --color-text-muted: #7D80AB;
  --color-text-dark: #0E1020;
  
  /* Text colors for light backgrounds (main content) */
  --color-text-primary-light: #1D2037;
  --color-text-secondary-light: #2A2E4A;
  --color-text-body-light: #3D4060;
  --color-text-muted-light: #6B6F8A;
  
  /* Semantic colors */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #5D608F;
  
  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #1D2037 0%, #2D304D 50%, #3D4063 100%);
  --gradient-accent: linear-gradient(135deg, #FF6B6B 0%, #E55A5A 100%);
  --gradient-dark: linear-gradient(180deg, #0E1020 0%, #1D2037 100%);
  --gradient-light: linear-gradient(180deg, #F8F9FC 0%, #E8EBF5 100%);
  
  /* === Typography === */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Roboto Mono', 'SF Mono', monospace;
  
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* === Spacing (4px grid) === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  
  /* === Borders & Radius === */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
  
  /* === Shadows (Luxury Blue Theme) === */
  --shadow-sm: 0 1px 2px rgba(29, 32, 55, 0.05);
  --shadow-md: 0 4px 6px rgba(29, 32, 55, 0.08);
  --shadow-lg: 0 10px 15px rgba(29, 32, 55, 0.1);
  --shadow-xl: 0 20px 40px rgba(29, 32, 55, 0.12);
  --shadow-2xl: 0 40px 80px rgba(29, 32, 55, 0.15);
  --shadow-blue-glow: 0 0 60px rgba(29, 32, 55, 0.2);
  --shadow-card-hover: 0 25px 50px rgba(29, 32, 55, 0.15);
  
  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slower: 500ms ease;
  
  /* === Z-Index === */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-tooltip: 400;
  
  /* === Layout === */
  --max-width: 1200px;
  --section-padding: 120px;
  --section-padding-mobile: 80px;
}

/* Dark mode: Already using dark theme by default, no overrides needed */