/* ========================================
   CSS Variables & Theme
   ======================================== */
:root {
    /* Light theme (default) */
    --bg-gradient-start: #667eea;
    --bg-gradient-end: #764ba2;
    --container-bg: white;
    --text-color: #333;
    --text-secondary: #666;
    --text-light: #555;
    --game-area-bg: #f8f9fa;
    --border-color: #e9ecef;
    --outline-color: #ddd;
    --header-gradient-start: #667eea;
    --header-gradient-end: #764ba2;
    --overlay-bg: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] {
    --bg-gradient-start: #1a1a2e;
    --bg-gradient-end: #16213e;
    --container-bg: #2c2c2c;
    --text-color: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-light: #a0a0a0;
    --game-area-bg: #1e1e1e;
    --border-color: #404040;
    --outline-color: #555;
    --header-gradient-start: #4a5568;
    --header-gradient-end: #2d3748;
    --overlay-bg: rgba(44, 44, 44, 0.95);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-gradient-start: #1a1a2e;
        --bg-gradient-end: #16213e;
        --container-bg: #2c2c2c;
        --text-color: #e0e0e0;
        --text-secondary: #b0b0b0;
        --text-light: #a0a0a0;
        --game-area-bg: #1e1e1e;
        --border-color: #404040;
        --outline-color: #555;
        --header-gradient-start: #4a5568;
        --header-gradient-end: #2d3748;
        --overlay-bg: rgba(44, 44, 44, 0.95);
    }
}