/* Theme System - CSS Variables and Dark/Light Theme Support */

/* CSS Custom Properties (Variables) for theming */
:root {
    /* Light theme (default) */
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8f9fa;
    --bg-input: #ffffff;
    
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --text-white: #ffffff;
    
    --border-primary: #e9ecef;
    --border-secondary: #dee2e6;
    
    --accent-primary: #007bff;
    
    /* RGB values for rgba() usage */
    --accent-primary-rgb: 0, 123, 255;
    --error-border-rgb: 245, 198, 203;
    --btn-primary-bg-rgb: 0, 123, 255;
    
    /* SVG icons for light theme */
    --select-arrow-svg: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095.1c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.9z%22%2F%3E%3C%2Fsvg%3E');
    
    --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-heavy: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    /* Theme-aware colors */
    --error-bg: #f8d7da;
    --error-border: #f5c6cb;
    --error-text: #721c24;
    
    --success-bg: #d4edda;
    --success-border: #c3e6cb;
    --success-text: #155724;
    
    /* Button colors */
    --btn-primary-bg: #007bff;
    --btn-primary-hover: #0056b3;
    --btn-success-bg: #28a745;
    --btn-success-hover: #1e7e34;
    --btn-danger-bg: #f44336;
    --btn-danger-hover: #d32f2f;
}

/* Dark theme overrides */
.theme-dark {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #242424;
    --bg-input: #3a3a3a;
    
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-tertiary: #808080;
    --text-white: #ffffff;
    
    --border-primary: #404040;
    --border-secondary: #555555;
    
    --accent-primary: #4a9eff;
    
    /* RGB values for rgba() usage in dark mode */
    --accent-primary-rgb: 74, 158, 255;
    --error-border-rgb: 109, 44, 44;
    --btn-primary-bg-rgb: 0, 102, 204;
    
    /* SVG icons for dark theme */
    --select-arrow-svg: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23b0b0b0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095.1c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.9z%22%2F%3E%3C%2Fsvg%3E');
    
    --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-heavy: 0 4px 12px rgba(0, 0, 0, 0.4);
    
    /* Theme-aware colors for dark mode */
    --error-bg: #4a1e1e;
    --error-border: #6d2c2c;
    --error-text: #f8a8a8;
    
    --success-bg: #1e3a1e;
    --success-border: #2c5d2c;
    --success-text: #a8d8a8;
    
    /* Adjust button colors for dark theme */
    --btn-primary-bg: #0066cc;
    --btn-primary-hover: #004499;
    --btn-success-bg: #22aa44;
    --btn-success-hover: #1e7e34;
    --btn-danger-bg: #cc3333;
    --btn-danger-hover: #aa2222;
}

/* Apply CSS variables to existing styles */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.container {
    background: var(--bg-secondary) !important;
    box-shadow: var(--shadow-heavy) !important;
}

/* Input and form elements */
input[type="number"],
input[type="text"],
select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

input[type="number"]:focus,
input[type="text"]:focus,
select:focus {
    border-color: var(--btn-primary-bg) !important;
}

/* Labels and text */
label {
    color: var(--text-secondary) !important;
}

.output-section-title {
    color: var(--text-primary) !important;
}

.output-label {
    color: var(--text-secondary) !important;
}

.output-value {
    color: var(--text-primary) !important;
}

.output-unit {
    color: var(--text-tertiary) !important;
}

/* Output sections */
.output-item {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-primary) !important;
}

/* Buttons */
.add-screen {
    background-color: var(--btn-primary-bg) !important;
}

.add-screen:hover {
    background-color: var(--btn-primary-hover) !important;
}

/* Error styles */
.input-error input,
.input-error select {
    border-color: var(--error-border) !important;
    background-color: var(--error-bg) !important;
}

.validation-errors {
    background-color: var(--error-bg) !important;
    border-color: var(--error-border) !important;
    color: var(--error-text) !important;
}



/* Canvas and visualizer - these need special handling for dark theme */

.theme-dark canvas {
    filter: brightness(0.9);
}

/* Ensure theme transitions are smooth */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Override transitions for canvas and specific elements that shouldn't transition */
canvas,
.screen-visualizer canvas {
    transition: none !important;
}