/**
 * Design Tokens v1.0.0
 * OKLCH-based monochrome design system
 * Perceptually uniform color space for light/dark theme support
 * Apple Design Awards quality standards
 */

:root {
  /* ============================================================
     COLOR SYSTEM - LIGHT THEME (Default)
     OKLCH: Perceptually uniform color model
     Monochrome palette for visual harmony
     ============================================================ */
  
  /* Background Layers */
  --color-bg: oklch(98% 0 0);
  --color-bg-page: oklch(98% 0 0);
  --color-surface: oklch(96% 0 0);
  --color-surface-secondary: oklch(94% 0 0);
  --color-surface-tertiary: oklch(92% 0 0);

  /* Border System */
  --color-border: oklch(88% 0 0);
  --color-border-subtle: oklch(92% 0 0);
  --color-border-strong: oklch(80% 0 0);

  /* Text Hierarchy */
  --color-text-primary: oklch(20% 0 0);
  --color-text-secondary: oklch(45% 0 0);
  --color-text-tertiary: oklch(60% 0 0);
  --color-text-disabled: oklch(70% 0 0);
  --color-text-on-accent: oklch(100% 0 0);

  /* Accent System */
  --color-accent: oklch(30% 0 0);
  --color-accent-hover: oklch(25% 0 0);
  --color-accent-active: oklch(20% 0 0);
  --color-accent-subtle: oklch(95% 0 0);

  /* Semantic Colors - Monochrome with subtle hue for accessibility */
  --color-success: oklch(60% 0.12 145);
  --color-success-bg: oklch(95% 0.03 145);
  --color-success-border: oklch(80% 0.10 145);

  --color-error: oklch(55% 0.15 25);
  --color-error-bg: oklch(95% 0.03 25);
  --color-error-border: oklch(80% 0.10 25);

  --color-warning: oklch(65% 0.12 85);
  --color-warning-bg: oklch(95% 0.03 85);
  --color-warning-border: oklch(85% 0.10 85);

  --color-info: oklch(60% 0.12 250);
  --color-info-bg: oklch(95% 0.03 250);
  --color-info-border: oklch(80% 0.10 250);

  /* Grayscale Spectrum */
  --gray-0: oklch(100% 0 0);
  --gray-2: oklch(98% 0 0);
  --gray-4: oklch(96% 0 0);
  --gray-6: oklch(94% 0 0);
  --gray-12: oklch(92% 0 0);
  --gray-16: oklch(88% 0 0);
  --gray-24: oklch(80% 0 0);
  --gray-40: oklch(60% 0 0);
  --gray-55: oklch(45% 0 0);
  --gray-80: oklch(20% 0 0);
  --gray-100: oklch(0% 0 0);

  /* ============================================================
     SPACING SCALE - 4px Base Unit
     Mathematical progression for consistent rhythm
     ============================================================ */
  
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;

  /* ============================================================
     TYPOGRAPHY SYSTEM
     Inter font family with precise scale
     ============================================================ */
  
  /* Font Sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 48px;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --leading-loose: 2;

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Font Families */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;

  /* ============================================================
     BORDER RADIUS SYSTEM
     Consistent corner treatment
     ============================================================ */
  
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-base: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ============================================================
     SHADOW SYSTEM
     Subtle elevation with OKLCH
     ============================================================ */
  
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.06);
  --shadow-base: 0 1px 3px oklch(0% 0 0 / 0.08);
  --shadow-md: 0 4px 8px oklch(0% 0 0 / 0.08);
  --shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.12);
  --shadow-xl: 0 16px 48px oklch(0% 0 0 / 0.16);
  --shadow-inner: inset 0 2px 4px oklch(0% 0 0 / 0.06);

  /* ============================================================
     TRANSITION SYSTEM
     Consistent animation timing
     ============================================================ */
  
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
     BREAKPOINTS
     Mobile-first responsive system
     ============================================================ */
  
  --breakpoint-mobile-sm: 320px;
  --breakpoint-mobile-lg: 480px;
  --breakpoint-tablet: 640px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;

  /* ============================================================
     Z-INDEX LAYERS
     Stacking context management
     ============================================================ */
  
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-overlay: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
  --z-tooltip: 1500;
}

/* ============================================================
   DARK THEME
   Inverted luminance with maintained contrast ratios
   ============================================================ */

[data-theme-style="dark"] {
  /* Background Layers */
  --color-bg: oklch(15% 0 0);
  --color-bg-page: oklch(15% 0 0);
  --color-surface: oklch(18% 0 0);
  --color-surface-secondary: oklch(22% 0 0);
  --color-surface-tertiary: oklch(26% 0 0);

  /* Border System */
  --color-border: oklch(28% 0 0);
  --color-border-subtle: oklch(24% 0 0);
  --color-border-strong: oklch(40% 0 0);

  /* Text Hierarchy */
  --color-text-primary: oklch(95% 0 0);
  --color-text-secondary: oklch(70% 0 0);
  --color-text-tertiary: oklch(55% 0 0);
  --color-text-disabled: oklch(40% 0 0);
  --color-text-on-accent: oklch(0% 0 0);

  /* Accent System */
  --color-accent: oklch(85% 0 0);
  --color-accent-hover: oklch(90% 0 0);
  --color-accent-active: oklch(95% 0 0);
  --color-accent-subtle: oklch(25% 0 0);

  /* Semantic Colors */
  --color-success: oklch(70% 0.15 145);
  --color-success-bg: oklch(20% 0.05 145);
  --color-success-border: oklch(35% 0.10 145);

  --color-error: oklch(70% 0.20 25);
  --color-error-bg: oklch(20% 0.05 25);
  --color-error-border: oklch(35% 0.10 25);

  --color-warning: oklch(75% 0.15 85);
  --color-warning-bg: oklch(25% 0.05 85);
  --color-warning-border: oklch(40% 0.10 85);

  --color-info: oklch(70% 0.15 250);
  --color-info-bg: oklch(20% 0.05 250);
  --color-info-border: oklch(35% 0.10 250);

  /* Grayscale Spectrum */
  --gray-100: oklch(0% 0 0);
  --gray-85: oklch(15% 0 0);
  --gray-82: oklch(18% 0 0);
  --gray-78: oklch(22% 0 0);
  --gray-76: oklch(24% 0 0);
  --gray-72: oklch(28% 0 0);
  --gray-60: oklch(40% 0 0);
  --gray-45: oklch(55% 0 0);
  --gray-30: oklch(70% 0 0);
  --gray-5: oklch(95% 0 0);
  --gray-0: oklch(100% 0 0);

  /* Shadows adjusted for dark mode */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.24);
  --shadow-base: 0 1px 3px oklch(0% 0 0 / 0.32);
  --shadow-md: 0 4px 8px oklch(0% 0 0 / 0.32);
  --shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.48);
  --shadow-xl: 0 16px 48px oklch(0% 0 0 / 0.64);
}

/* ============================================================
   LEGACY COMPATIBILITY LAYER
   Bridge to existing Bootstrap variables
   ============================================================ */

:root {
  --white: var(--gray-0);
  --black: var(--gray-100);
  --body-bg: var(--color-bg);
  --border-radius: var(--radius-base);
  --primary: var(--color-accent);
  --primary-hover: var(--color-accent-hover);
  --primary-active: var(--color-accent-active);
  --gray: var(--color-text-secondary);
  --gray-50: var(--gray-2);
  --gray-100: var(--gray-4);
  --gray-200: var(--gray-6);
  --gray-300: var(--gray-12);
  --gray-400: var(--gray-16);
  --gray-500: var(--gray-24);
  --gray-600: var(--gray-40);
  --gray-700: var(--gray-55);
  --gray-800: var(--gray-80);
  --gray-900: var(--gray-100);
  --danger: var(--color-error);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --info: var(--color-info);
}