/* Theme Layer - Sophisticated Modern Design System */
@layer theme {
    :root {
        /* Enable color-scheme for native elements */
        color-scheme: light dark;
        
        /* Premium Color Palette
         * Inspired by modern apps like Linear, Vercel, Stripe
         */
        
        /* Primary - Deep indigo blue */
        --primary-color: light-dark(oklch(56% 0.21 255), oklch(68% 0.19 255));
        --primary-hover: light-dark(oklch(52% 0.23 255), oklch(72% 0.17 255));
        --primary-light: light-dark(oklch(96% 0.04 255), oklch(25% 0.05 255));
        
        /* Accent colors - Carefully chosen */
        --accent-purple: light-dark(oklch(60% 0.20 285), oklch(70% 0.18 285));
        --accent-teal: light-dark(oklch(60% 0.15 200), oklch(70% 0.13 200));
        --accent-emerald: light-dark(oklch(60% 0.15 160), oklch(70% 0.13 160));
        
        /* Status colors */
        --success: light-dark(oklch(55% 0.16 145), oklch(65% 0.14 145));
        --warning: light-dark(oklch(70% 0.14 85), oklch(75% 0.12 85));
        --danger: light-dark(oklch(58% 0.18 25), oklch(65% 0.16 25));
        --info: light-dark(oklch(56% 0.16 240), oklch(66% 0.14 240));
        
        /* Grays - Neutral with slight blue tint */
        --gray-50: light-dark(oklch(98% 0.002 250), oklch(18% 0.008 250));
        --gray-100: light-dark(oklch(96% 0.003 250), oklch(22% 0.008 250));
        --gray-200: light-dark(oklch(93% 0.004 250), oklch(28% 0.008 250));
        --gray-300: light-dark(oklch(88% 0.005 250), oklch(35% 0.008 250));
        --gray-400: light-dark(oklch(75% 0.006 250), oklch(45% 0.008 250));
        --gray-500: light-dark(oklch(60% 0.007 250), oklch(55% 0.008 250));
        --gray-600: light-dark(oklch(45% 0.008 250), oklch(65% 0.008 250));
        --gray-700: light-dark(oklch(35% 0.009 250), oklch(75% 0.008 250));
        --gray-800: light-dark(oklch(25% 0.010 250), oklch(85% 0.008 250));
        --gray-900: light-dark(oklch(18% 0.010 250), oklch(92% 0.008 250));
        
        /* Text hierarchy */
        --text-primary: light-dark(oklch(18% 0.010 250), oklch(98% 0.002 250));
        --text-secondary: light-dark(oklch(45% 0.008 250), oklch(75% 0.006 250));
        --text-tertiary: light-dark(oklch(60% 0.006 250), oklch(60% 0.006 250));
        --text-disabled: light-dark(oklch(75% 0.004 250), oklch(45% 0.006 250));
        
        /* Backgrounds */
        --bg-primary: light-dark(oklch(100% 0 0), oklch(11% 0.008 250));
        --bg-secondary: light-dark(oklch(98% 0.002 250), oklch(14% 0.008 250));
        --bg-tertiary: light-dark(oklch(96% 0.003 250), oklch(17% 0.008 250));
        --bg-elevated: light-dark(oklch(100% 0 0), oklch(15% 0.008 250));
        --bg-overlay: light-dark(oklch(100% 0 0 / 0.8), oklch(11% 0.008 250 / 0.8));
        
        /* Borders */
        --border-default: light-dark(oklch(93% 0.003 250), oklch(25% 0.008 250));
        --border-muted: light-dark(oklch(96% 0.002 250), oklch(20% 0.008 250));
        --border-strong: light-dark(oklch(88% 0.004 250), oklch(35% 0.008 250));
        
        /* Premium shadows */
        --shadow-xs: 0 1px 2px 0 light-dark(
            oklch(0% 0 0 / 0.05),
            oklch(0% 0 0 / 0.3)
        );
        --shadow-sm: light-dark(
            0 1px 3px 0 oklch(0% 0 0 / 0.1) inset 0 1px 2px -1px oklch(0% 0 0 / 0.06),
            0 1px 3px 0 oklch(0% 0 0 / 0.4) inset 0 1px 2px -1px oklch(0% 0 0 / 0.3)
        );
        --shadow-md: light-dark(
            0 4px 6px -1px oklch(0% 0 0 / 0.1) inset 0 2px 4px -2px oklch(0% 0 0 / 0.06),
            0 4px 6px -1px oklch(0% 0 0 / 0.5) inset 0 2px 4px -2px oklch(0% 0 0 / 0.4)
        );
        --shadow-lg: light-dark(
            0 10px 15px -3px oklch(0% 0 0 / 0.1) inset 0 4px 6px -4px oklch(0% 0 0 / 0.05),
            0 10px 15px -3px oklch(0% 0 0 / 0.6) inset 0 4px 6px -4px oklch(0% 0 0 / 0.5)
        );
        --shadow-xl: light-dark(
            0 20px 25px -5px oklch(0% 0 0 / 0.1) inset 0 8px 10px -6px oklch(0% 0 0 / 0.04),
            0 20px 25px -5px oklch(0% 0 0 / 0.7) inset 0 8px 10px -6px oklch(0% 0 0 / 0.6)
        );
        
        /* Border radius */
        --radius-xs: 0.25rem;
        --radius-sm: 0.375rem;
        --radius-md: 0.5rem;
        --radius-lg: 0.625rem;
        --radius-xl: 0.75rem;
        --radius-2xl: 1rem;
        --radius-full: 9999px;
        
        /* Spacing scale */
        --space-0: 0;
        --space-px: 1px;
        --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-12: 3rem;
        --space-16: 4rem;
        --space-20: 5rem;
        
        /* Legacy spacing (for compatibility) */
        --space-xs: var(--space-1);
        --space-sm: var(--space-2);
        --space-md: var(--space-4);
        --space-lg: var(--space-6);
        --space-xl: var(--space-8);
        
        /* Typography - Futuristic Google Fonts */
        --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 
                     "Segoe UI", "Helvetica Neue", Arial, sans-serif;
        --font-display: 'Orbitron', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                        "Segoe UI", "Helvetica Neue", Arial, sans-serif;
        --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, 
                     "Liberation Mono", Menlo, monospace;
        
        /* Font sizes */
        --text-xs: 0.75rem;
        --text-sm: 0.875rem;
        --text-base: 1rem;
        --text-lg: 1.125rem;
        --text-xl: 1.25rem;
        --text-2xl: 1.5rem;
        --text-3xl: 1.875rem;
        --text-4xl: 2.25rem;
        
        /* Legacy font sizes (for compatibility) */
        --font-size-xs: var(--text-xs);
        --font-size-sm: var(--text-sm);
        --font-size-base: var(--text-base);
        --font-size-lg: var(--text-lg);
        --font-size-xl: var(--text-xl);
        --font-size-2xl: var(--text-2xl);
        
        /* Font weights */
        --font-normal: 400;
        --font-medium: 500;
        --font-semibold: 600;
        --font-bold: 700;
        
        /* Line heights */
        --leading-3: 0.75rem;
        --leading-4: 1rem;
        --leading-5: 1.25rem;
        --leading-6: 1.5rem;
        --leading-7: 1.75rem;
        --leading-8: 2rem;
        --leading-tight: 1.25;
        --leading-normal: 1.5;
        --leading-relaxed: 1.625;
        --leading-loose: 2;
        
        /* Transitions */
        --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);
        
        /* Z-index scale */
        --z-0: 0;
        --z-10: 10;
        --z-20: 20;
        --z-30: 30;
        --z-40: 40;
        --z-50: 50;
        --z-auto: auto;
        
        /* Legacy z-index (for compatibility) */
        --z-base: 1;
        --z-dropdown: 100;
        --z-sticky: 500;
        --z-overlay: 600;
        --z-modal: 1000;
        --z-popover: 2000;
        
        /* Component specific */
        --header-height: 3.5rem;
        --sidebar-width: 25rem;
        --content-max-width: 90rem;
        
        /* Legacy variables (for compatibility) */
        --primary-light: var(--primary-light);
        --primary-dark: var(--primary-hover);
        --secondary-color: var(--accent-teal);
        --danger-color: var(--danger);
        --warning-color: var(--warning);
        --info-color: var(--info);
        --dark: var(--gray-900);
        --dark-light: var(--gray-700);
        --light: var(--gray-100);
        --border-color: var(--border-default);
    }
    
    /* Explicit theme modes */
    :root[data-theme="light"] {
        color-scheme: light;
    }
    
    :root[data-theme="dark"] {
        color-scheme: dark;
    }
    
    /* Auto theme mode - follows system preference */
    :root[data-theme="auto"] {
        color-scheme: light dark;
    }
    
    /* High contrast support */
    @media (prefers-contrast: high) {
        :root {
            --border-default: light-dark(oklch(80% 0.004 250), oklch(40% 0.008 250));
            --text-secondary: light-dark(oklch(35% 0.008 250), oklch(85% 0.006 250));
        }
    }
    
    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        :root {
            --transition-fast: 0ms;
            --transition-base: 0ms;
            --transition-slow: 0ms;
        }
    }
}