/* ========================================
   CSS Custom Properties - Theme System
   Dark theme is default, light theme overrides
   ======================================== */

:root {
  /* ============ Theme Colors - Dark (Default) ============ */

  /* Dark theme (default) */
  --theme-bg: #0d0d0d;
  --theme-bg-secondary: #2a2a2f;

  --theme-text-primary: #fff;
  --theme-text-secondary: rgba(255, 255, 255, 0.85);
  --theme-text-muted: rgba(255, 255, 255, 0.55);

  --theme-border-color: rgba(255, 255, 255, 0.15);
  --theme-border-color-strong: rgba(255, 255, 255, 0.3);

  --theme-logo-filter: brightness(0) invert(1);


  /* ============ Colors - Neutral Palette ============ */

  /* Primary - Blue Accent */
  --color-primary: #007AFF;
  --color-primary-dark: #0051D5;
  --color-primary-light: #3395FF;

  /* Neutrals - Apple Gray Scale */
  --color-gray-50: #FAFAFA;
  --color-gray-100: #F5F5F7;
  --color-gray-200: #E8E8ED;
  --color-gray-300: #D2D2D7;
  --color-gray-400: #AEAEB2;
  --color-gray-500: #8E8E93;
  --color-gray-600: #636366;
  --color-gray-700: #48484A;
  --color-gray-800: #3A3A3C;
  --color-gray-900: #1C1C1E;

  /* Semantic Colors */
  --color-bg: #FFFFFF;
  --color-bg-secondary: var(--color-gray-50);
  --color-bg-tertiary: var(--color-gray-100);

  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-500);

  --color-border: var(--color-gray-200);
  --color-border-secondary: var(--color-gray-300);

  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Dark Mode Colors */
  --color-dark-bg: var(--color-gray-900);
  --color-dark-bg-secondary: var(--color-gray-800);
  --color-dark-text: var(--color-gray-100);

  /* State colors */
  --color-success: #34C759;
  --color-error: #FF3B30;
  --color-warning: #FF9500;


  /* ============ Typography ============ */

  /* Font families */
  --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Roboto', sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;

  /* Font sizes - 4 semantic roles, all responsive via clamp() where it matters */
  --text-display: clamp(3.5rem, 7vw, 5rem);          /* 56-80px — section-lead, stat values, h1 */
  --text-heading: clamp(1.8rem, 3.6vw, 2.7rem);      /* 28.8-43.2px — section titles, h2-h3 (+20%) */
  --text-body: 1.6rem;                                /* 25.6px — paragraphs, h4-h6, default */
  --text-micro: 0.875rem;                             /* 14px — nav, meta, labels */

  /* Font weights */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 800;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.47059;
  --leading-relaxed: 1.625;
  --leading-loose: 1.8;


  /* ============ Spacing - 8pt Grid System ============ */

  --space-1: 0.125rem;   /* 2px */
  --space-2: 0.25rem;    /* 4px */
  --space-3: 0.5rem;     /* 8px */
  --space-4: 0.75rem;    /* 12px */
  --space-5: 1rem;       /* 16px */
  --space-6: 1.5rem;     /* 24px */
  --space-7: 2rem;       /* 32px */
  --space-8: 2.5rem;     /* 40px */
  --space-9: 3rem;       /* 48px */
  --space-10: 4rem;      /* 64px */
  --space-11: 5rem;      /* 80px */
  --space-12: 6rem;      /* 96px */
  --space-13: 8rem;      /* 128px */

  /* Container widths */
  --container-sm: 640px;
  --container-md: 900px;
  --container-lg: 1600px;
  --container-xl: 1920px;


  /* ============ Borders ============ */

  --border-width: 1px;
  --border-width-2: 2px;

  /* Border radius - Apple style */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* Border styles */
  --border-light: 1px solid rgba(0, 122, 255, 0.1);
  --border-medium: 1px solid rgba(0, 122, 255, 0.2);
  --border-medium-plus: 1px solid rgba(0, 122, 255, 0.3);
  --border-strong: 1px solid rgba(0, 122, 255, 0.4);
  --border-prominent: 2px solid rgba(0, 122, 255, 0.5);


  /* ============ Shadows ============ */

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02);

  /* Quiet shadows (formerly neon glows - rip out AI-slop) */
  --shadow-blue-glow: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-blue-glow-hover: 0 12px 32px rgba(0, 0, 0, 0.16);
  --shadow-blue-prominent: 0 16px 40px rgba(0, 0, 0, 0.2);
  --shadow-blue-card: 0 2px 8px rgba(0, 0, 0, 0.08);


  /* ============ Transitions ============ */

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  --ease-in: cubic-bezier(0.42, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);


  /* ============ Z-index ============ */

  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;


  /* ============ Gradients ============ */

  --gradient-blue-primary: linear-gradient(135deg, rgba(0, 122, 255, 1), rgba(0, 102, 255, 1));
  --gradient-blue-secondary: linear-gradient(135deg, rgba(0, 122, 255, 0.6), rgba(64, 150, 255, 0.5));
  --gradient-purple-primary: linear-gradient(135deg, rgba(138, 43, 226, 0.6), rgba(147, 51, 234, 0.5));
  --gradient-green-primary: linear-gradient(135deg, rgba(52, 199, 89, 0.6), rgba(34, 197, 94, 0.5));


  /* ============ Backdrop Filters ============ */

  --backdrop-glass-medium: blur(12px);
  --backdrop-glass-heavy: blur(20px);


  /* Text Shadows - disabled (was producing AI-slop neon glow on headings) */
  --text-shadow-primary: none;
  --text-shadow-secondary: none;
  --text-shadow-hover: none;


  /* ============ Breakpoints ============ */

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;


  /* ============ Color Opacity Variants ============ */

  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-85: rgba(255, 255, 255, 0.85);
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-black-30: rgba(0, 0, 0, 0.3);
  --color-black-40: rgba(0, 0, 0, 0.4);
  --color-black-50: rgba(0, 0, 0, 0.5);
  --color-black-60: rgba(0, 0, 0, 0.6);
}


/* ============ Light Theme Overrides ============ */

.light-theme,
[data-theme="light"] {
  /* Light theme — pure monochrome */
  --theme-bg: #fff;
  --theme-bg-secondary: #f5f5f5;

  --theme-text-primary: #000;
  --theme-text-secondary: rgba(0, 0, 0, 0.7);
  --theme-text-muted: rgba(0, 0, 0, 0.5);

  --theme-border-color: rgba(0, 0, 0, 0.1);
  --theme-border-color-strong: rgba(0, 0, 0, 0.2);

  --theme-logo-filter: brightness(0);
}