/**
 * Theme System - Light & Dark Mode
 * CSS Variables for consistent theming across the website
 */

:root {
    /* Light Mode (Default) - Modern, Professional Color Palette */
    --color-bg-primary: #f8f9fa;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f0f2f5;

    --color-text-primary: #0d1117;
    --color-text-primary-rgb: 13, 17, 23;
    --color-text-secondary: #57606a;
    --color-text-secondary-rgb: 87, 96, 106;
    --color-text-tertiary: #8b949e;
    --color-text-tertiary-rgb: 139, 148, 158;

    --color-border: #d0d7de;
    --color-border-light: #eaeef2;

    /* Brand Colors - Modern Blue */
    --color-primary: #0969da;
    --color-primary-rgb: 9, 105, 218;
    --color-primary-light: #54aeff;
    --color-primary-dark: #033d8b;

    --color-secondary: #6366f1;
    --color-secondary-rgb: 99, 102, 241;
    --color-secondary-light: #818cf8;

    /* Status Colors - Vibrant & Accessible */
    --color-success: #1a7f0d;
    --color-success-rgb: 26, 127, 13;
    --color-warning: #d29922;
    --color-warning-rgb: 210, 153, 34;
    --color-error: #da3633;
    --color-error-rgb: 218, 54, 51;
    --color-info: #0969da;
    --color-info-rgb: 9, 105, 218;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #0969da 0%, #54aeff 100%);
    --gradient-secondary: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    --gradient-success: linear-gradient(135deg, #1a7f0d 0%, #26a641 100%);
    --gradient-brand: linear-gradient(135deg, #0069b4 0%, #23a638 100%);
    --gradient-card: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    --gradient-auth-bg: linear-gradient(135deg, #0969da 0%, #54aeff 50%, #1a7f0d 100%);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
}

/* Dark Mode - Premium Dark Theme with WCAG AA Compliance */
html[data-theme="dark"] {
    /* Background Colors - Rich dark palette with depth */
    --color-bg-primary: #0d1117;
    --color-bg-secondary: #161b22;
    --color-bg-tertiary: #21262d;

    /* Text Colors - WCAG AA Compliant (4.5:1 minimum contrast) */
    --color-text-primary: #f0f6fc;           /* Off-white - 20:1 contrast */
    --color-text-primary-rgb: 240, 246, 252;
    --color-text-secondary: #c9d1d9;         /* Light gray - 12:1 contrast */
    --color-text-secondary-rgb: 201, 209, 217;
    --color-text-tertiary: #8b949e;          /* Medium gray - 8:1 contrast */
    --color-text-tertiary-rgb: 139, 148, 158;

    /* Border Colors - Subtle but visible */
    --color-border: #30363d;
    --color-border-light: #21262d;

    /* Brand Colors - Vibrant for dark mode */
    --color-primary: #58a6ff;
    --color-primary-rgb: 88, 166, 255;
    --color-primary-light: #79c0ff;
    --color-primary-dark: #1f6feb;

    --color-secondary: #d2a8ff;
    --color-secondary-rgb: 210, 168, 255;
    --color-secondary-light: #e0c3fc;

    /* Status Colors - Vibrant and visible */
    --color-success: #3fb950;
    --color-success-rgb: 63, 185, 80;
    --color-warning: #d29922;
    --color-warning-rgb: 210, 153, 34;
    --color-error: #f85149;
    --color-error-rgb: 248, 81, 73;
    --color-info: #58a6ff;
    --color-info-rgb: 88, 166, 255;

    /* Gradients - Dark mode optimized */
    --gradient-primary: linear-gradient(135deg, #58a6ff 0%, #79c0ff 100%);
    --gradient-secondary: linear-gradient(135deg, #d2a8ff 0%, #e0c3fc 100%);
    --gradient-success: linear-gradient(135deg, #3fb950 0%, #56d364 100%);
    --gradient-brand: linear-gradient(135deg, #58a6ff 0%, #3fb950 100%);
    --gradient-card: linear-gradient(135deg, #21262d 0%, #161b22 100%);
    --gradient-auth-bg: linear-gradient(135deg, #1f6feb 0%, #58a6ff 50%, #3fb950 100%);

    /* Shadows - Deeper and more pronounced */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.8);
}

/* Smooth transition when switching themes */
/* Disable transitions during initial page load to prevent flash */
html:not([data-theme-loaded]) {
    transition: none !important;
}

html:not([data-theme-loaded]) body {
    transition: none !important;
}

/* Disable transitions during theme switching to prevent flash */
html.theme-changing,
html.theme-changing *,
html.theme-changing *::before,
html.theme-changing *::after {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
}

html.theme-changing body,
html.theme-changing body * {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
}

/* Enable transitions after page load */
html[data-theme-loaded] {
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

html[data-theme-loaded] body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Set initial body styles without transition */
body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

/* Common Elements */
a {
    color: var(--color-primary);
    transition: color var(--transition-fast);
}

a:hover:not(.btn):not([class*="btn"]) {
    color: var(--color-primary-light);
}

button, input, textarea, select {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border-color: var(--color-border);
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

button:hover {
    background-color: var(--color-bg-tertiary);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--color-primary);
    outline: none;
}

input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Cards and Containers */
.card, .container-box {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

/* Tables */
table {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

thead {
    background-color: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border);
}

tbody tr {
    border-bottom: 1px solid var(--color-border);
}

tbody tr:hover {
    background-color: var(--color-bg-secondary);
}

/* Forms */
.form-group label {
    color: var(--color-text-primary);
}

.form-control {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-info-rgb), 0.1);
    background-color: var(--color-bg-secondary);
}

.form-control:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Input, Textarea, Select */
input, textarea, select {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--color-primary);
    background-color: var(--color-bg-secondary);
    box-shadow: 0 0 0 3px rgba(var(--color-info-rgb), 0.1);
    outline: none;
}

input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

input::placeholder, textarea::placeholder {
    color: var(--color-text-tertiary);
}

/* Error and Success Messages */
.error-message {
    background-color: rgba(var(--color-error-rgb), 0.1);
    border: 1px solid var(--color-error);
    color: var(--color-error);
    padding: 14px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid var(--color-error);
}

.success-message {
    background-color: rgba(var(--color-success-rgb), 0.1);
    border: 1px solid var(--color-success);
    color: var(--color-success);
    padding: 14px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    border-left: 4px solid var(--color-success);
}

/* Alerts */
.alert {
    transition: background-color var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal);
}

.alert-success {
    background-color: rgba(var(--color-success-rgb), 0.1);
    border-color: var(--color-success);
    color: var(--color-success);
}

.alert-warning {
    background-color: rgba(var(--color-warning-rgb), 0.1);
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.alert-error {
    background-color: rgba(var(--color-error-rgb), 0.1);
    border-color: var(--color-error);
    color: var(--color-error);
}

.alert-info {
    background-color: rgba(var(--color-info-rgb), 0.1);
    border-color: var(--color-info);
    color: var(--color-info);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
}