/**
 * Matrix Theme Variables
 * All CSS custom properties and theme definitions
 */

:root {
    /* Primary Matrix Colors */
    --matrix-black: #000000;
    --matrix-green: #00ff41;
    --matrix-white: #ffffff;
    
    /* Matrix Color Variations */
    --matrix-green-dark: #00cc33;
    --matrix-green-light: #33ff66;
    --matrix-green-glow: #00ff41;
    --matrix-glow-secondary: #00e63d;
    
    /* Matrix Blue for Selected State (complementary to matrix green) */
    --matrix-blue: #42a5f5;
    --matrix-blue-light: #4da6ff;
    --matrix-blue-dark: #1976d2;
    
    /* Matrix Error/Warning Colors */
    --matrix-error: #ff0040;
    --matrix-warning: #ffc107;
    --matrix-info: #00ffff;
    
    /* Background Colors */
    --matrix-bg-primary: #000000;
    --matrix-bg-secondary: #0a0a0a;
    --matrix-bg-tertiary: rgba(0, 0, 0, 0.9);
    --matrix-bg-card: rgba(0, 0, 0, 0.8);
    --matrix-bg-overlay: rgba(0, 0, 0, 0.7);
    
    /* Text Colors */
    --matrix-text-primary: #00ff41;
    --matrix-text-secondary: rgba(0, 255, 65, 0.8);
    --matrix-text-muted: rgba(0, 255, 65, 0.6);
    --matrix-text-disabled: rgba(0, 255, 65, 0.3);
    
    /* Border Colors */
    --matrix-border-primary: rgba(0, 255, 65, 0.3);
    --matrix-border-secondary: rgba(0, 255, 65, 0.2);
    --matrix-border-active: #00ff41;
    
    /* Shadow Colors */
    --matrix-shadow-small: 0 2px 4px rgba(0, 255, 65, 0.1);
    --matrix-shadow-medium: 0 4px 8px rgba(0, 255, 65, 0.2);
    --matrix-shadow-large: 0 8px 16px rgba(0, 255, 65, 0.3);
    --matrix-shadow-glow: 0 0 10px rgba(0, 255, 65, 0.4);
    
    /* Typography */
    --matrix-font-family: 'Courier New', monospace;
    --matrix-font-size-xs: 0.75rem;
    --matrix-font-size-sm: 0.875rem;
    --matrix-font-size-base: 1rem;
    --matrix-font-size-lg: 1.125rem;
    --matrix-font-size-xl: 1.25rem;
    --matrix-font-size-2xl: 1.5rem;
    --matrix-font-size-3xl: 1.875rem;
    --matrix-font-size-4xl: 2.25rem;
    --matrix-font-size-5xl: 3rem;
    
    --matrix-line-height-tight: 1.25;
    --matrix-line-height-normal: 1.5;
    --matrix-line-height-relaxed: 1.75;
    
    --matrix-letter-spacing-tight: -0.025em;
    --matrix-letter-spacing-normal: 0;
    --matrix-letter-spacing-wide: 0.025em;
    --matrix-letter-spacing-wider: 0.05em;
    --matrix-letter-spacing-widest: 0.1em;
    
    /* Spacing Scale */
    --matrix-space-1: 0.25rem;
    --matrix-space-2: 0.5rem;
    --matrix-space-3: 0.75rem;
    --matrix-space-4: 1rem;
    --matrix-space-5: 1.25rem;
    --matrix-space-6: 1.5rem;
    --matrix-space-8: 2rem;
    --matrix-space-10: 2.5rem;
    --matrix-space-12: 3rem;
    --matrix-space-16: 4rem;
    --matrix-space-20: 5rem;
    --matrix-space-24: 6rem;
    --matrix-space-32: 8rem;
    
    /* Border Radius */
    --matrix-radius-sm: 0.125rem;
    --matrix-radius: 0.25rem;
    --matrix-radius-md: 0.375rem;
    --matrix-radius-lg: 0.5rem;
    --matrix-radius-xl: 0.75rem;
    --matrix-radius-2xl: 1rem;
    --matrix-radius-full: 9999px;
    
    /* Z-Index Scale */
    --matrix-z-dropdown: 1000;
    --matrix-z-sticky: 1020;
    --matrix-z-fixed: 1030;
    --matrix-z-modal-backdrop: 1040;
    --matrix-z-modal: 1050;
    --matrix-z-popover: 1060;
    --matrix-z-tooltip: 1070;
    
    /* Transition Durations */
    --matrix-duration-fast: 0.15s;
    --matrix-duration-normal: 0.3s;
    --matrix-duration-slow: 0.5s;
    
    /* Animation Timing Functions */
    --matrix-ease: ease;
    --matrix-ease-in: ease-in;
    --matrix-ease-out: ease-out;
    --matrix-ease-in-out: ease-in-out;
    
    /* Breakpoints (for use in JS) */
    --matrix-bp-sm: 640px;
    --matrix-bp-md: 768px;
    --matrix-bp-lg: 1024px;
    --matrix-bp-xl: 1280px;
    --matrix-bp-2xl: 1536px;
}

/* Dark theme (default) */
[data-theme="matrix"],
[data-theme="dark"],
:root {
    color-scheme: dark;
}

/* Light theme override (if needed) */
[data-theme="light"] {
    --matrix-bg-primary: #ffffff;
    --matrix-bg-secondary: #f5f5f5;
    --matrix-text-primary: #000000;
    color-scheme: light;
}

/* High contrast theme */
[data-theme="high-contrast"],
@media (prefers-contrast: high) {
    --matrix-green: #00ff00;
    --matrix-border-primary: rgba(0, 255, 0, 0.5);
    --matrix-text-primary: #00ff00;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    :root {
        --matrix-duration-fast: 0.01ms;
        --matrix-duration-normal: 0.01ms;
        --matrix-duration-slow: 0.01ms;
    }
}