/* Theme-Aware Styling for Pages with Hardcoded Colors */

/* ===========================================
   AUTH & OVERLAY THEME VARIABLES
   Override these in body[data-theme="..."] for each theme.
   Use var(--auth-*, --overlay-*) in CSS instead of hardcoded colors.
   =========================================== */
:root {
    /* Primary action button (Sign In, Reset Password, etc.) */
    --auth-btn-primary: #141414;
    --auth-btn-primary-hover: #464646;
    --auth-btn-primary-text: #ffffff;
    /* Auth surfaces and borders */
    --auth-surface: #ffffff;
    --auth-border: #e5e7eb;
    --auth-border-input: #d1d5db;
    /* Auth text */
    --auth-text-heading: #111827;
    --auth-text-body: #374151;
    --auth-text-muted: #6b7280;
    /* Secondary/cancel button */
    --auth-cancel-bg: #ffffff;
    --auth-cancel-border: #d1d5db;
    --auth-cancel-hover-bg: #f9fafb;
    --auth-cancel-hover-border: #9ca3af;
    /* Auth success/error states (verify email, alerts) */
    --auth-success-bg: #f0fdf4;
    --auth-success-border: #bbf7d0;
    --auth-success-text: #15803d;
    --auth-error-bg: #fef2f2;
    --auth-error-border: #fecaca;
    --auth-error-text: #b91c1c;
    /* Overlay (processing modal) */
    --overlay-backdrop: rgba(0, 0, 0, 0.35);
    --overlay-card-bg: #ffffff;
    --overlay-card-border: #e5e7eb;
    --overlay-spinner-track: #e5e7eb;
    --overlay-spinner-accent: #2563eb;
    --overlay-text: #374151;
}

/* Theme Header - for page headers that should adapt to current theme */
.theme-header {
    background: var(--theme-primary-color, #667eea) !important;
    color: white !important;
}

/* Theme Button - for buttons that should adapt to current theme */
.theme-button {
    background: var(--theme-primary-color, #667eea) !important;
    color: white !important;
}

.theme-button:hover {
    background: var(--theme-secondary-color, #764ba2) !important;
    color: white !important;
}

/* Theme Panel Header - for panel headers that should adapt to current theme */
.theme-panel-header {
    background: var(--theme-primary-color, #667eea) !important;
    color: white !important;
}

/* Optional: override auth/overlay vars per theme, e.g.:
   body[data-theme="xyz"] {
     --auth-btn-primary: #0078d4;
     --auth-btn-primary-hover: #106ebe;
     --overlay-spinner-accent: #0078d4;
   }
*/
/* Theme-aware styling for different themes */
body[data-theme="gui3"] {
    --theme-primary-color: #667eea;
    --theme-secondary-color: #764ba2;
}

body[data-theme="met"] {
    --theme-primary-color: #2c3e50;
    --theme-secondary-color: #34495e;
}

body[data-theme="start"] {
    --theme-primary-color: #3498db;
    --theme-secondary-color: #2980b9;
}

body[data-theme="black-cab"] {
    --theme-primary-color: #1a1a1a;
    --theme-secondary-color: #2d2d2d;
}

body[data-theme="bts"] {
    --theme-primary-color: #007bff;
    --theme-secondary-color: #6c757d;
}

body[data-theme="val"] {
    --theme-primary-color: #e74c3c;
    --theme-secondary-color: #c0392b;
}

body[data-theme="gtx"] {
    --theme-primary-color: #2c3e50;
    --theme-secondary-color: #e74c3c;
}

body[data-theme="wui"] {
    --theme-primary-color: #0078d4;
    --theme-secondary-color: #106ebe;
}

/* Fallback for when theme is not set */
body:not([data-theme]) {
    --theme-primary-color: #667eea;
    --theme-secondary-color: #764ba2;
}