/**
 * CSS VARIABLES - Theme colors and design system
 * Dark & Light mode support
 */

:root[data-theme="dark"] {
    /* Primary Colors */
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --primary-light: rgba(59, 130, 246, 0.1);

    /* Background Colors — true black */
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #141414;
    --bg-hover: rgba(255, 255, 255, 0.06);

    /* Border Colors */
    --border-color: #1e1e1e;
    --border-light: rgba(255, 255, 255, 0.08);

    /* Text Colors — high contrast on black */
    --text-primary: #f0f0f0;
    --text-secondary: #a0a0a0;
    --text-muted: #666666;

    /* Gradient Colors */
    --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);

    /* Status Colors — brighter for black bg */
    --success: #22c55e;
    --success-light: rgba(34, 197, 94, 0.1);
    --warning: #facc15;
    --warning-light: rgba(250, 204, 21, 0.1);
    --error: #f43f5e;
    --error-light: rgba(244, 63, 94, 0.1);
    --info: #60a5fa;
    --info-light: rgba(96, 165, 250, 0.1);

    /* Shadow — deeper on true black */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.7);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.8);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.9);

    /* Game modal accent */
    --color-accent: #3b82f6;
    --color-accent-rgb: 59, 130, 246;
}

:root[data-theme="light"] {
    /* Primary Colors — darker for white bg readability */
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: rgba(37, 99, 235, 0.1);

    /* Background Colors — true white */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f0f1f3;
    --bg-hover: rgba(0, 0, 0, 0.04);

    /* Border Colors — visible on white */
    --border-color: #d1d5db;
    --border-light: rgba(0, 0, 0, 0.08);

    /* Text Colors — max contrast on white */
    --text-primary: #111111;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;

    /* Gradient Colors */
    --gradient-1: linear-gradient(135deg, #4f6de8 0%, #6d42a0 100%);
    --gradient-2: linear-gradient(135deg, #e870f0 0%, #f04060 100%);
    --gradient-3: linear-gradient(135deg, #3a9df0 0%, #00d4f0 100%);
    --gradient-4: linear-gradient(135deg, #34d07a 0%, #2ad4c0 100%);

    /* Status Colors — darker for white bg */
    --success: #059669;
    --success-light: rgba(5, 150, 105, 0.1);
    --warning: #d97706;
    --warning-light: rgba(217, 119, 6, 0.1);
    --error: #dc2626;
    --error-light: rgba(220, 38, 38, 0.1);
    --info: #2563eb;
    --info-light: rgba(37, 99, 235, 0.1);

    /* Shadow — subtle on white */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.14);

    /* Game modal accent */
    --color-accent: #2563eb;
    --color-accent-rgb: 37, 99, 235;
}

/* Global Resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Smooth transitions for theme switching — only active during switch */
/* Class added/removed by JS ThemeManager when user changes theme */
html.theme-switching,
html.theme-switching * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* Scrollbar styling for dark theme */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
}

/* Selection styling */
::selection {
    background: var(--primary-color);
    color: white;
}