/* ========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   Substack-style dark platform aesthetic
   ======================================== */

:root {
  /* Primary Colors - Electric blue accent */
  --color-primary: #00a8ff;
  --color-primary-rgb: 0, 168, 255;
  --color-primary-light: rgba(0, 168, 255, 0.15);
  --color-primary-medium: rgba(0, 168, 255, 0.3);
  --color-primary-dark: rgba(0, 168, 255, 0.6);
  --color-primary-glow: 0 0 14px rgba(0, 168, 255, 0.5);
  
  /* Background Colors - Deeper grey (Dark Mode) */
  --color-bg-base: #232528;
  --color-bg-base-darker: #1c1e20;
  --color-bg-base-mid: #202224;
  --color-bg-base-light: #2f3236;
  --color-bg-card: rgba(32, 34, 36, 0.9);
  --color-bg-card-hover: rgba(47, 50, 54, 0.95);
  --color-bg-overlay: rgba(35, 37, 40, 0.98);
  --color-bg-transparent: transparent;
  
  /* Text Colors (Dark Mode) */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.75);
  --color-text-muted: rgba(255, 255, 255, 0.5);
  --color-text-disabled: rgba(255, 255, 255, 0.35);
  --color-text-input: #e0e0e0;
  
  /* Border Colors - More neutral, less blue (Dark Mode) */
  --color-border-primary: rgba(0, 168, 255, 0.5);
  --color-border-secondary: rgba(255, 255, 255, 0.12);
  --color-border-light: rgba(255, 255, 255, 0.08);
  --color-border-muted: rgba(255, 255, 255, 0.04);
  
  /* Shadow Colors */
  --color-shadow-primary: rgba(0, 168, 255, 0.25);
  --color-shadow-secondary: rgba(0, 0, 0, 0.4);
  --color-shadow-glow: rgba(0, 168, 255, 0.3);
  
  /* Spacing Scale */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 2rem;
  --spacing-3xl: 2.5rem;
  --spacing-4xl: 3rem;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 50%;
  --radius-pill: 2rem;
  
  /* Typography */
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3.5rem;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-slower: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Z-index Scale */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1000;
  --z-modal: 10000;
  
  /* Backdrop Blur */
  --blur-sm: blur(4px);
  --blur-md: blur(8px);
  --blur-lg: blur(12px);
  --blur-xl: blur(16px);
}

/* ========================================
   LIGHT MODE OVERRIDES
   Complete theme-specific token mapping
   ======================================== */

:root.light-mode {
  /* Primary/Accent Colors - Darker, more saturated blue for light bg */
  --color-primary: #1F6FEB;
  --color-primary-rgb: 31, 111, 235;
  --color-primary-light: rgba(31, 111, 235, 0.1);
  --color-primary-medium: rgba(31, 111, 235, 0.2);
  --color-primary-dark: rgba(31, 111, 235, 0.4);
  --color-primary-glow: 0 0 12px rgba(31, 111, 235, 0.25);
  
  /* Background Colors - Warm neutral tones */
  --color-bg-base: #fafafa;
  --color-bg-base-darker: #f5f5f5;
  --color-bg-base-mid: #f7f7f7;
  --color-bg-base-light: #ffffff;
  --color-bg-card: #ffffff;
  --color-bg-card-hover: #fafafa;
  --color-bg-overlay: rgba(255, 255, 255, 0.98);
  
  /* Text Colors - High contrast for readability */
  --color-text-primary: #111111;
  --color-text-secondary: #333333;
  --color-text-muted: #666666;
  --color-text-disabled: #999999;
  --color-text-input: #333333;
  
  /* Border Colors - Visible warm grey */
  --color-border-primary: rgba(31, 111, 235, 0.5);
  --color-border-secondary: #e4e4e4;
  --color-border-light: #ebebeb;
  --color-border-muted: #f0f0f0;
  
  /* Shadow Colors - Subtle for light mode */
  --color-shadow-primary: rgba(31, 111, 235, 0.15);
  --color-shadow-secondary: rgba(0, 0, 0, 0.05);
  --color-shadow-glow: rgba(31, 111, 235, 0.15);
  
  /* Card-specific tokens */
  --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
  --card-border: #e4e4e4;
  
  /* Chip/Tag tokens */
  --chip-background: #f2f2f2;
  --chip-border: #e6e6e6;
  --chip-text: #333333;
  
  /* Chart tokens */
  --chart-grid: #e0e0e0;
  --chart-axis: #333333;
  --chart-line-primary: #1F6FEB;
  --chart-line-secondary: #10B981;
  
  /* Hero overlay for images */
  --hero-overlay-start: rgba(0, 0, 0, 0.65);
  --hero-overlay-mid: rgba(0, 0, 0, 0.45);
  --hero-overlay-end: rgba(0, 0, 0, 0.2);
  
  /* Typography weights - heavier for light backgrounds */
  --font-weight-normal: 500;
  --font-weight-medium: 600;
  --font-weight-semibold: 700;
  --font-weight-bold: 800;
}