/* Dark Theme - Color Variables Only */

/* CSS Custom Properties - Dark theme as default */
:root {
    /* Dark Theme Colors - WCAG AA Compliant (default) */
    --bg-primary: #0b1220;
    /* Darker for better contrast */
    --bg-secondary: #131a2b;
    --bg-tertiary: #1f2937;
    --bg-card: #1f2937;
    --bg-header: linear-gradient(135deg, #000000 0%, #0f172a 50%, #1e293b 100%);
    --bg-hero: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --bg-footer: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

    --text-primary: #f8fafc;
    /* Better contrast: 17.2:1 */
    --text-secondary: #e2e8f0;
    /* Better contrast: 12.6:1 */
    --text-tertiary: #cbd5e1;
    /* Better contrast: 8.9:1 */
    --text-accent: #ffffff;
    /* Better contrast: 18.1:1 */
    --text-muted: #94a3b8;
    /* Better contrast: 4.5:1 */

    --border-primary: #374151;
    --border-secondary: #4a5568;
    --border-focus: #6b7280;

    --shadow-primary: rgba(0, 0, 0, 0.3);
    --shadow-secondary: rgba(0, 0, 0, 0.5);
    --shadow-hover: rgba(30, 64, 175, 0.15);

    /* Brand/Accent Colors */
    --primary-color: #3b82f6;
    /* Primary Blue */
    --color-accent: #3b82f6;
    /* Blue accent */
    --color-highlight: #ffd700;
    /* Gold highlight for stats */
    --color-success: #10b981;
    /* Green */
    --color-warning: #f59e0b;
    /* Orange */

    /* Button Colors */
    --btn-primary-bg: #0369a1;
    /* Much darker blue for dark theme */
    --btn-primary-hover: #075985;
    /* Even darker blue on hover */

    /* Theme Toggle Colors */
    --theme-toggle-bg: rgba(31,
            41,
            55,
            0.8);
    /* Semi-transparent dark background */
    --theme-toggle-hover: rgba(55,
            65,
            81,
            0.9);
    /* Slightly less transparent on hover */
    --theme-toggle-icon: #f8fafc;
    /* Light color icon for dark theme */

    /* Additional UI Colors */
    --accent-primary: #3b82f6;
    /* Same as color-accent */
    --bg-hover: #1f2937;
    /* Lighter background for hover states */
    --primary-hover: #075985;
    /* Text Link Hover same as button hover */

    /* Banner Variables */
    --banner-bg: var(--primary-color);
    /* Primary color background for banner in dark theme */
    --banner-text: #ffffff;
    /* White text for banner in dark theme */

    /* Theme Transitions */
    --theme-transition: background 0.3s ease, color 0.3s ease,
        border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}