/**
 * Design Tokens
 * A comprehensive design system built on OKLCH color science
 * and 4px base spacing rhythm for pixel-perfect consistency
 */

:root {
    /* ============================================
       Theme Configuration
       ============================================ */
    --theme-hue: 0;
    --theme-chroma: 0;
    --theme-lightness: 60;
    
    /* ============================================
       Color System - Light Mode
       Perceptually calibrated using OKLCH
       ============================================ */
    
    /* Surface Colors */
    --color-bg: oklch(99% 0.003 var(--theme-hue));
    --color-surface: oklch(97% 0.005 var(--theme-hue));
    --color-surface-elevated: oklch(100% 0.001 var(--theme-hue));
    
    /* Border Colors */
    --color-border: oklch(88% 0.010 var(--theme-hue));
    --color-border-subtle: oklch(94% 0.006 var(--theme-hue));
    
    /* Text Colors */
    --color-text-primary: oklch(18% 0.012 var(--theme-hue));
    --color-text-secondary: oklch(48% 0.018 var(--theme-hue));
    --color-text-tertiary: oklch(62% 0.014 var(--theme-hue));
    
    /* Accent Scale - Dynamic & Perceptually Balanced */
    --color-accent-50: oklch(98% calc(var(--theme-chroma) * 1% * 0.25) var(--theme-hue));
    --color-accent-100: oklch(96% calc(var(--theme-chroma) * 1% * 0.35) var(--theme-hue));
    --color-accent-200: oklch(93% calc(var(--theme-chroma) * 1% * 0.55) var(--theme-hue));
    --color-accent-300: oklch(86% calc(var(--theme-chroma) * 1% * 0.75) var(--theme-hue));
    --color-accent-400: oklch(74% calc(var(--theme-chroma) * 1% * 0.88) var(--theme-hue));
    --color-accent-500: oklch(calc(var(--theme-lightness) * 1%) calc(var(--theme-chroma) * 1%) var(--theme-hue));
    --color-accent-600: oklch(50% calc(var(--theme-chroma) * 1%) var(--theme-hue));
    --color-accent-700: oklch(38% calc(var(--theme-chroma) * 1% * 0.92) var(--theme-hue));
    --color-accent-800: oklch(26% calc(var(--theme-chroma) * 1% * 0.72) var(--theme-hue));
    --color-accent-900: oklch(18% calc(var(--theme-chroma) * 1% * 0.48) var(--theme-hue));
    
    /* System Indicators - Optimized for Contrast */
    --color-success: oklch(62% 0.20 152);
    --color-success-bg: oklch(97% 0.07 152);
    --color-error: oklch(62% 0.22 27);
    --color-error-bg: oklch(97% 0.07 27);
    --color-warning: oklch(72% 0.18 87);
    --color-warning-bg: oklch(97% 0.07 87);
    --color-info: oklch(62% 0.20 242);
    --color-info-bg: oklch(97% 0.07 242);
    
    /* ============================================
       Spacing Scale - 4px Base Rhythm
       Perfect vertical rhythm and optical balance
       ============================================ */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    
    /* ============================================
       Typography Scale - Harmonious Ratios
       Based on modular scale for perfect hierarchy
       ============================================ */
    
    /* Font Sizes */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 36px;
    --text-4xl: 48px;
    
    /* Line Heights - Vertical Rhythm */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 1.75;
    
    /* ============================================
       Layout Tokens - Optimal Reading Experience
       ============================================ */
    --content-max: 840px;
    --reading-max: 680px;
    --nav-height: 72px;
    
    /* ============================================
       Motion & Timing
       Refined easing curves for elegant transitions
       ============================================ */
    --transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.20s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ============================================
       Elevation & Shadows - Subtle Depth
       ============================================ */
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.04);
    --shadow-base: 0 2px 8px oklch(0% 0 0 / 0.06);
    --shadow-md: 0 4px 16px oklch(0% 0 0 / 0.08);
    --shadow-lg: 0 8px 32px oklch(0% 0 0 / 0.12);
    --shadow-xl: 0 16px 48px oklch(0% 0 0 / 0.16);
}

/* ============================================
   Dark Mode Tokens
   Enhanced contrast and depth for dark environments
   ============================================ */
[data-theme="dark"] {
    /* Surface Colors */
    --color-bg: oklch(14% 0.012 var(--theme-hue));
    --color-surface: oklch(17% 0.016 var(--theme-hue));
    --color-surface-elevated: oklch(21% 0.020 var(--theme-hue));
    
    /* Border Colors */
    --color-border: oklch(30% 0.028 var(--theme-hue));
    --color-border-subtle: oklch(24% 0.022 var(--theme-hue));
    
    /* Text Colors */
    --color-text-primary: oklch(96% 0.008 var(--theme-hue));
    --color-text-secondary: oklch(72% 0.014 var(--theme-hue));
    --color-text-tertiary: oklch(58% 0.018 var(--theme-hue));
    
    /* System Indicators - Dark Mode Optimized */
    --color-success: oklch(72% 0.18 152);
    --color-success-bg: oklch(20% 0.08 152);
    --color-error: oklch(72% 0.20 27);
    --color-error-bg: oklch(20% 0.08 27);
    --color-warning: oklch(82% 0.16 87);
    --color-warning-bg: oklch(22% 0.08 87);
    --color-info: oklch(72% 0.18 242);
    --color-info-bg: oklch(20% 0.08 242);
    
    /* Enhanced Shadows for Dark Mode */
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3);
    --shadow-base: 0 2px 8px oklch(0% 0 0 / 0.4);
    --shadow-md: 0 4px 16px oklch(0% 0 0 / 0.5);
    --shadow-lg: 0 8px 32px oklch(0% 0 0 / 0.6);
    --shadow-xl: 0 16px 48px oklch(0% 0 0 / 0.7);
}