:root {
    /* OKLCH Monochrome Color System - Light Theme */
    --color-black: oklch(0.1 0 0);
    --color-gray-950: oklch(0.15 0 0);
    --color-gray-900: oklch(0.2 0 0);
    --color-gray-800: oklch(0.3 0 0);
    --color-gray-700: oklch(0.4 0 0);
    --color-gray-600: oklch(0.5 0 0);
    --color-gray-500: oklch(0.6 0 0);
    --color-gray-400: oklch(0.7 0 0);
    --color-gray-300: oklch(0.8 0 0);
    --color-gray-200: oklch(0.85 0 0);
    --color-gray-100: oklch(0.9 0 0);
    --color-gray-50: oklch(0.95 0 0);
    --color-white: oklch(1.0 0 0);
    
    /* Semantic Color Mapping - Light Theme */
    --color-primary: var(--color-gray-950);
    --color-secondary: var(--color-gray-700);
    --color-tertiary: var(--color-gray-500);
    --color-quaternary: var(--color-gray-300);
    --color-quinary: var(--color-gray-200);
    --color-surface: var(--color-gray-50);
    --color-surface-elevated: var(--color-white);
    --color-border: var(--color-gray-200);
    --color-border-subtle: var(--color-gray-100);
    --color-text-primary: var(--color-gray-950);
    --color-text-secondary: var(--color-gray-700);
    --color-text-tertiary: var(--color-gray-500);
    --color-text-inverse: var(--color-white);
    
    /* Status Colors with OKLCH */
    --color-error: oklch(0.6 0.15 15);
    --color-error-light: oklch(0.95 0.05 15);
    --color-error-border: oklch(0.85 0.08 15);
    --color-success: oklch(0.6 0.12 145);
    --color-success-light: oklch(0.95 0.05 145);
    --color-success-border: oklch(0.85 0.08 145);
    --color-warning: oklch(0.7 0.12 85);
    --color-warning-light: oklch(0.95 0.05 85);
    --color-warning-border: oklch(0.85 0.08 85);
    --color-info: oklch(0.6 0.12 225);
    --color-info-light: oklch(0.95 0.05 225);
    --color-info-border: oklch(0.85 0.08 225);
    
    /* Typography Scale - Enhanced with Line Heights */
    --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
    --text-base: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
    --text-3xl: clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem);
    --text-4xl: clamp(2.25rem, 1.9rem + 1.6vw, 3rem);
    --text-5xl: clamp(2.75rem, 2.3rem + 2vw, 3.75rem);
    
    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* 4px Base Spacing Scale - Extended */
    --space-px: 1px;
    --space-0: 0;
    --space-0_5: 0.125rem;
    --space-1: 0.25rem;
    --space-1_5: 0.375rem;
    --space-2: 0.5rem;
    --space-2_5: 0.625rem;
    --space-3: 0.75rem;
    --space-3_5: 0.875rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-18: 4.5rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --space-32: 8rem;
    --space-36: 9rem;
    --space-40: 10rem;
    --space-44: 11rem;
    --space-48: 12rem;
    --space-52: 13rem;
    --space-56: 14rem;
    --space-60: 15rem;
    --space-64: 16rem;
    --space-72: 18rem;
    --space-80: 20rem;
    --space-96: 24rem;
    
    /* 24-Column Grid System */
    --grid-columns: 24;
    --grid-gap: var(--space-4);
    --grid-gap-sm: var(--space-2);
    --grid-gap-lg: var(--space-6);
    --grid-gap-xl: var(--space-8);
    --container-xs: 320px;
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1400px;
    --max-width: var(--container-xl);
    
    /* Border Radius Scale */
    --radius-none: 0;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-base: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-full: 50%;
    
    /* Shadow System - Enhanced */
    --shadow-xs: 0 1px 2px oklch(0.1 0 0 / 0.05);
    --shadow-sm: 0 2px 4px oklch(0.1 0 0 / 0.06), 0 1px 2px oklch(0.1 0 0 / 0.1);
    --shadow-base: 0 4px 6px oklch(0.1 0 0 / 0.07), 0 2px 4px oklch(0.1 0 0 / 0.06);
    --shadow-md: 0 6px 12px oklch(0.1 0 0 / 0.08), 0 4px 6px oklch(0.1 0 0 / 0.05);
    --shadow-lg: 0 10px 20px oklch(0.1 0 0 / 0.1), 0 6px 12px oklch(0.1 0 0 / 0.05);
    --shadow-xl: 0 20px 40px oklch(0.1 0 0 / 0.1), 0 12px 24px oklch(0.1 0 0 / 0.06);
    --shadow-2xl: 0 40px 80px oklch(0.1 0 0 / 0.12), 0 24px 48px oklch(0.1 0 0 / 0.08);
    --shadow-inner: inset 0 2px 4px oklch(0.1 0 0 / 0.06);
    --shadow-outline: 0 0 0 3px oklch(0.15 0 0 / 0.1);
    --shadow-glow: 0 0 20px oklch(0.15 0 0 / 0.15);
    
    /* Transitions and Animations */
    --duration-75: 75ms;
    --duration-100: 100ms;
    --duration-150: 150ms;
    --duration-200: 200ms;
    --duration-300: 300ms;
    --duration-500: 500ms;
    --duration-700: 700ms;
    --duration-1000: 1000ms;
    
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    --transition-fast: var(--duration-150) var(--ease-out);
    --transition-base: var(--duration-200) var(--ease-out);
    --transition-slow: var(--duration-300) var(--ease-out);
    --transition-bounce: var(--duration-300) var(--ease-bounce);
    
    /* Z-Index Scale */
    --z-hide: -1;
    --z-base: 0;
    --z-docked: 10;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-banner: 1030;
    --z-overlay: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-skiplink: 1070;
    --z-toast: 1080;
    --z-tooltip: 1090;
    
    /* Legacy Z-Index (for compatibility) */
    --z-navbar: var(--z-sticky);
    --z-subnav: var(--z-docked);
    --z-fab: var(--z-docked);
    
    /* Breakpoints (for use in calc() expressions) */
    --bp-xs: 320;
    --bp-sm: 640;
    --bp-md: 768;
    --bp-lg: 1024;
    --bp-xl: 1200;
    --bp-2xl: 1400;
    
    /* Component-Specific Tokens */
    --navbar-height: 64px;
    --subnav-height: 56px;
    --sidebar-width: 280px;
    --sidebar-width-collapsed: 80px;
    --fab-size: 56px;
    --fab-size-sm: 48px;
    --avatar-size-xs: 24px;
    --avatar-size-sm: 32px;
    --avatar-size-base: 40px;
    --avatar-size-lg: 48px;
    --avatar-size-xl: 64px;
    --avatar-size-2xl: 80px;
    
    /* Focus Ring */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-color: var(--color-primary);
    --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
    --focus-ring-offset-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-elevated);
    --focus-ring-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) var(--focus-ring-color);
}

/* Dark Theme Color Overrides */
@media (prefers-color-scheme: dark) {
    :root {
        /* Inverted semantic mappings for dark theme */
        --color-primary: var(--color-gray-50);
        --color-secondary: var(--color-gray-300);
        --color-tertiary: var(--color-gray-500);
        --color-quaternary: var(--color-gray-700);
        --color-quinary: var(--color-gray-800);
        --color-surface: var(--color-gray-950);
        --color-surface-elevated: var(--color-gray-900);
        --color-border: var(--color-gray-800);
        --color-border-subtle: var(--color-gray-900);
        --color-text-primary: var(--color-gray-50);
        --color-text-secondary: var(--color-gray-300);
        --color-text-tertiary: var(--color-gray-500);
        --color-text-inverse: var(--color-gray-950);
        
        /* Adjusted status colors for dark theme */
        --color-error-light: oklch(0.2 0.05 15);
        --color-error-border: oklch(0.3 0.08 15);
        --color-success-light: oklch(0.2 0.05 145);
        --color-success-border: oklch(0.3 0.08 145);
        --color-warning-light: oklch(0.2 0.05 85);
        --color-warning-border: oklch(0.3 0.08 85);
        --color-info-light: oklch(0.2 0.05 225);
        --color-info-border: oklch(0.3 0.08 225);
        
        /* Adjusted shadows for dark theme */
        --shadow-xs: 0 1px 2px oklch(0.05 0 0 / 0.15);
        --shadow-sm: 0 2px 4px oklch(0.05 0 0 / 0.18), 0 1px 2px oklch(0.05 0 0 / 0.3);
        --shadow-base: 0 4px 6px oklch(0.05 0 0 / 0.21), 0 2px 4px oklch(0.05 0 0 / 0.18);
        --shadow-md: 0 6px 12px oklch(0.05 0 0 / 0.24), 0 4px 6px oklch(0.05 0 0 / 0.15);
        --shadow-lg: 0 10px 20px oklch(0.05 0 0 / 0.3), 0 6px 12px oklch(0.05 0 0 / 0.15);
        --shadow-xl: 0 20px 40px oklch(0.05 0 0 / 0.3), 0 12px 24px oklch(0.05 0 0 / 0.18);
        --shadow-2xl: 0 40px 80px oklch(0.05 0 0 / 0.36), 0 24px 48px oklch(0.05 0 0 / 0.24);
        --shadow-inner: inset 0 2px 4px oklch(0.05 0 0 / 0.18);
        --shadow-outline: 0 0 0 3px oklch(0.85 0 0 / 0.1);
        --shadow-glow: 0 0 20px oklch(0.85 0 0 / 0.15);
    }
}

/* Explicit dark theme class */
.dark {
    /* Same dark theme variables as above */
    --color-primary: var(--color-gray-50);
    --color-secondary: var(--color-gray-300);
    --color-tertiary: var(--color-gray-500);
    --color-quaternary: var(--color-gray-700);
    --color-quinary: var(--color-gray-800);
    --color-surface: var(--color-gray-950);
    --color-surface-elevated: var(--color-gray-900);
    --color-border: var(--color-gray-800);
    --color-border-subtle: var(--color-gray-900);
    --color-text-primary: var(--color-gray-50);
    --color-text-secondary: var(--color-gray-300);
    --color-text-tertiary: var(--color-gray-500);
    --color-text-inverse: var(--color-gray-950);
    
    --color-error-light: oklch(0.2 0.05 15);
    --color-error-border: oklch(0.3 0.08 15);
    --color-success-light: oklch(0.2 0.05 145);
    --color-success-border: oklch(0.3 0.08 145);
    --color-warning-light: oklch(0.2 0.05 85);
    --color-warning-border: oklch(0.3 0.08 85);
    --color-info-light: oklch(0.2 0.05 225);
    --color-info-border: oklch(0.3 0.08 225);
}

/* Print optimizations */
@media print {
    :root {
        --shadow-xs: none;
        --shadow-sm: none;
        --shadow-base: none;
        --shadow-md: none;
        --shadow-lg: none;
        --shadow-xl: none;
        --shadow-2xl: none;
        --shadow-inner: none;
        --shadow-outline: none;
        --shadow-glow: none;
    }
}