/* Theme Variables & Transitions */
:root {
    /* Transitions */
    --transition-speed: 0.5s;
    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode (Cyberpunk/Tech Minimalist) */
html[data-theme="dark"] {
    --bg-base: #07070a;
    --bg-surface: #111116;
    --bg-elevated: #1a1a23;
    
    --text-primary: #f0f0f5;
    --text-secondary: #a0a0b0;
    
    --accent-primary: #00e5ff; /* Electric Cyan */
    --accent-secondary: #bd00ff; /* Neon Purple */
    --accent-glow: rgba(0, 229, 255, 0.6);
    
    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(0, 229, 255, 0.3);
    
    --shadow-glow: 0 0 20px var(--accent-glow);
    --shadow-surface: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* Light Mode (Tech-Brutalism) */
html[data-theme="light"] {
    --bg-base: #f7f7f9;
    --bg-surface: #ffffff;
    --bg-elevated: #eeeef2;
    
    --text-primary: #0b0b0f;
    --text-secondary: #4a4a55;
    
    --accent-primary: #0044ff; /* Deep Tech Blue */
    --accent-secondary: #ff3366; /* Sharp Pink/Red */
    --accent-glow: rgba(0, 68, 255, 0.3);
    
    --border-subtle: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.9);
    
    --shadow-glow: 4px 4px 0px rgba(0,0,0,1);
    --shadow-surface: 8px 8px 0px rgba(0,0,0,0.9);
}

/* Base element transitions */
html {
    transition: background-color var(--transition-speed) var(--transition-timing),
                color var(--transition-speed) var(--transition-timing);
}

body, header, .command-interface, .calculator-widget, button, input {
    transition: background-color var(--transition-speed) var(--transition-timing),
                border-color var(--transition-speed) var(--transition-timing),
                box-shadow var(--transition-speed) var(--transition-timing),
                color var(--transition-speed) var(--transition-timing);
}