/* Drivers Advantage: accessibility theme corrections.
   Load AFTER layout.css, login.css, main.css, and other page styles.
   Keep existing accessibility-panel styling from accessibility.css. */

/* Restore normal brand variables for dark mode: do not make a background token pale. */
:root[data-theme="dark"] {
  --purple-900: #30214D;
  --purple-800: #3B285F;
  --purple-700: #6042A0;
  --purple-500: #9273CE;
  --purple-50: #302A40;
  --orange-600: #F1A56E;
  --orange-700: #F1A56E;
  --ink: #F4F5FA;
  --slate: #D1D4E0;
  --muted: #BFC3D2;
  --line: #525767;
  --paper: #12141B;
  --surface: #232632;
  --good: #8EDDB5;
  --good-bg: #203C31;
  --warn: #F4D08D;
  --warn-bg: #43351E;
  --bad: #FFAAA7;
  --bad-bg: #452729;
}

/* Login page: separate its dark hero from the readable form panel. */
:root[data-theme="dark"] .login-page-wrapper { background: var(--paper); }
:root[data-theme="dark"] .login-side {
  background: linear-gradient(160deg, #211735, #38265A);
  color: #FFFFFF;
}
:root[data-theme="dark"] .login-side h2 { color: #FFFFFF; }
:root[data-theme="dark"] .login-side p,
:root[data-theme="dark"] .login-stats span { color: #E2DDEE; }
:root[data-theme="dark"] .login-form-side,
:root[data-theme="dark"] .auth-center { background: var(--paper); }
:root[data-theme="dark"] .login-container { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .login-container h1,
:root[data-theme="dark"] .account-help strong,
:root[data-theme="dark"] .auth-center label { color: var(--ink); }
:root[data-theme="dark"] .login-container input[type="text"],
:root[data-theme="dark"] .login-container input[type="email"],
:root[data-theme="dark"] .login-container input[type="password"],
:root[data-theme="dark"] .login-container select,
:root[data-theme="dark"] .auth-center textarea {
  background: #171A23;
  color: #FFFFFF;
  border-color: var(--line);
}
:root[data-theme="dark"] .login-container input::placeholder,
:root[data-theme="dark"] .auth-center textarea::placeholder { color: #BFC3D2; }
:root[data-theme="dark"] .login-container button:not(.toggle-password),
:root[data-theme="dark"] .login-container input[type="submit"] {
  background: #6042A0;
  color: #FFFFFF;
}
:root[data-theme="dark"] .login-container button:not(.toggle-password):hover,
:root[data-theme="dark"] .login-container input[type="submit"]:hover { background: #7657B7; }
:root[data-theme="dark"] .login-container .toggle-password { color: #D5C5FA; background: transparent; }
:root[data-theme="dark"] .login-container .toggle-password:hover { background: #373146; }
:root[data-theme="dark"] .create-account-btn { color: var(--ink); }
:root[data-theme="dark"] .success-box { background: var(--good-bg); color: var(--good); border-color: var(--good); }

/* Dashboard main.css hardcoded backgrounds and text. */
:root[data-theme="dark"] .dashboard-page { background: linear-gradient(135deg, #12141B, #1C202A); }
:root[data-theme="dark"] .dashboard-header,
:root[data-theme="dark"] .dashboard-card { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .dashboard-header h1,
:root[data-theme="dark"] .dashboard-card h2,
:root[data-theme="dark"] .dashboard-nav .logo { color: var(--ink); }
:root[data-theme="dark"] .dashboard-header p,
:root[data-theme="dark"] .dashboard-card p,
:root[data-theme="dark"] .card-label,
:root[data-theme="dark"] .dashboard-nav a { color: var(--slate); }
:root[data-theme="dark"] .dashboard-nav a:hover { color: #D5C5FA; }
:root[data-theme="dark"] .role-badge { background: #343C50; color: #E3EAFF; }
:root[data-theme="dark"] .feature-card { background: linear-gradient(135deg, #304C74, #223653); color: #FFFFFF; }
:root[data-theme="dark"] .feature-card h2 { color: #FFFFFF; }
:root[data-theme="dark"] .feature-card p { color: #E5ECF7; }
:root[data-theme="dark"] .dashboard-button { background: #FFFFFF; color: #203C5C; }
:root[data-theme="dark"] .dashboard-button.primary { background: #6042A0; color: #FFFFFF; }
:root[data-theme="dark"] .dashboard-button.primary:hover { background: #7657B7; }
:root[data-theme="dark"] .status-active { color: #8EDDB5 !important; }
:root[data-theme="dark"] .status-inactive,
:root[data-theme="dark"] .status-pending { color: #F4D08D !important; }

/* Shared components using fixed light backgrounds. */
:root[data-theme="dark"] .data-table th,
:root[data-theme="dark"] .notif-item.unread,
:root[data-theme="dark"] .row-item.is-clickable:hover,
:root[data-theme="dark"] .segmented a:hover { background: #302A40; }
:root[data-theme="dark"] .input,
:root[data-theme="dark"] .form-group input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="dark"] .form-group select { background: #171A23; color: var(--ink); }
:root[data-theme="dark"] .btn-primary { background: #6042A0; color: #FFFFFF; }
:root[data-theme="dark"] .btn-primary:hover { background: #7657B7; }
:root[data-theme="dark"] .btn-accent { background: #A94F20; color: #FFFFFF; }
:root[data-theme="dark"] .btn-accent:hover { background: #8B401A; }
:root[data-theme="dark"] .btn-success { background: #22674A; color: #FFFFFF; }
:root[data-theme="dark"] .btn-danger { background: #8B3334; color: #FFFFFF; }
:root[data-theme="dark"] .welcome-banner { background: linear-gradient(120deg, #251936, #38265A); color: #FFFFFF; }
:root[data-theme="dark"] .welcome-banner h1 { color: #FFFFFF; }
:root[data-theme="dark"] .btn-light { background: #FFFFFF; color: #251936; }
:root[data-theme="dark"] .btn-outline-light { color: #FFFFFF; }

/* High contrast must win over dark mode and all colorblind palettes.
   Explicit black foreground for every yellow-filled control. */
:root[data-color-mode="high-contrast"] {
  --purple-900: #FFFFFF;
  --purple-800: #FFFFFF;
  --purple-700: #FFFF00;
  --purple-500: #FFFF00;
  --purple-50: #000000;
  --orange-600: #FFFF00;
  --orange-700: #FFFF00;
  --ink: #FFFFFF;
  --slate: #FFFFFF;
  --muted: #FFFFFF;
  --line: #FFFFFF;
  --paper: #000000;
  --surface: #000000;
  --good: #A3FFD0;
  --good-bg: #000000;
  --warn: #FFFF00;
  --warn-bg: #000000;
  --bad: #FFB3B3;
  --bad-bg: #000000;
  color-scheme: dark;
}
:root[data-color-mode="high-contrast"] body,
:root[data-color-mode="high-contrast"] .login-page-wrapper,
:root[data-color-mode="high-contrast"] .login-side,
:root[data-color-mode="high-contrast"] .login-form-side,
:root[data-color-mode="high-contrast"] .login-container,
:root[data-color-mode="high-contrast"] .auth-center,
:root[data-color-mode="high-contrast"] .dashboard-page,
:root[data-color-mode="high-contrast"] .dashboard-header,
:root[data-color-mode="high-contrast"] .dashboard-card,
:root[data-color-mode="high-contrast"] .feature-card,
:root[data-color-mode="high-contrast"] .welcome-banner,
:root[data-color-mode="high-contrast"] .site-header,
:root[data-color-mode="high-contrast"] .site-footer {
  background: #000000;
  color: #FFFFFF;
  border-color: #FFFFFF;
}
:root[data-color-mode="high-contrast"] :is(h1,h2,h3,p,span,label,strong,small),
:root[data-color-mode="high-contrast"] .login-side h2,
:root[data-color-mode="high-contrast"] .login-side p,
:root[data-color-mode="high-contrast"] .login-stats span,
:root[data-color-mode="high-contrast"] .dashboard-header h1,
:root[data-color-mode="high-contrast"] .dashboard-card h2,
:root[data-color-mode="high-contrast"] .dashboard-header p,
:root[data-color-mode="high-contrast"] .dashboard-card p,
:root[data-color-mode="high-contrast"] .feature-card h2,
:root[data-color-mode="high-contrast"] .feature-card p,
:root[data-color-mode="high-contrast"] .welcome-banner h1,
:root[data-color-mode="high-contrast"] .login-container h1,
:root[data-color-mode="high-contrast"] .account-help strong,
:root[data-color-mode="high-contrast"] .auth-center label {
  color: #FFFFFF;
}
:root[data-color-mode="high-contrast"] a { color: #FFFF00; }
:root[data-color-mode="high-contrast"] .site-header a,
:root[data-color-mode="high-contrast"] .site-header .brand,
:root[data-color-mode="high-contrast"] .site-header .user-name { color: #FFFFFF; }
:root[data-color-mode="high-contrast"] .site-header .primary-nav a.active { border-bottom-color: #FFFF00; }
:root[data-color-mode="high-contrast"] .role-badge,
:root[data-color-mode="high-contrast"] .badge { background: #000000; color: #FFFF00; border: 1px solid #FFFF00; }
:root[data-color-mode="high-contrast"] .login-container input,
:root[data-color-mode="high-contrast"] .login-container select,
:root[data-color-mode="high-contrast"] .auth-center textarea,
:root[data-color-mode="high-contrast"] .form-group input,
:root[data-color-mode="high-contrast"] .form-group select,
:root[data-color-mode="high-contrast"] .input { background: #000000; color: #FFFFFF; border: 2px solid #FFFFFF; }
:root[data-color-mode="high-contrast"] .btn,
:root[data-color-mode="high-contrast"] .dashboard-button,
:root[data-color-mode="high-contrast"] .dashboard-button.primary,
:root[data-color-mode="high-contrast"] .login-container button:not(.toggle-password),
:root[data-color-mode="high-contrast"] .login-container input[type="submit"],
:root[data-color-mode="high-contrast"] .segmented a.active {
  background: #FFFF00;
  color: #000000;
  border: 2px solid #FFFF00;
}
:root[data-color-mode="high-contrast"] .login-container .toggle-password { background: #000000; color: #FFFF00; border: 1px solid #FFFF00; }
:root[data-color-mode="high-contrast"] .create-account-btn { color: #FFFF00; border-color: #FFFFFF; }
:root[data-color-mode="high-contrast"] .dashboard-button:hover,
:root[data-color-mode="high-contrast"] .dashboard-button.primary:hover,
:root[data-color-mode="high-contrast"] .login-container button:not(.toggle-password):hover { background: #FFFFFF; color: #000000; }
:root[data-color-mode="high-contrast"] .success-box,
:root[data-color-mode="high-contrast"] .error { background: #000000; color: #FFFFFF; border-color: #FFFF00; }
:root[data-color-mode="high-contrast"] .status-active { color: #A3FFD0 !important; }
:root[data-color-mode="high-contrast"] .status-inactive,
:root[data-color-mode="high-contrast"] .status-pending { color: #FFFF00 !important; }
:root[data-color-mode="high-contrast"] :focus-visible { outline: 3px solid #FFFF00; outline-offset: 3px; }

/* Settings panel itself remains readable in high contrast. */
:root[data-color-mode="high-contrast"] #accessibility-button,
:root[data-color-mode="high-contrast"] #accessibility-panel { background: #000000; color: #FFFFFF; border-color: #FFFFFF; }
:root[data-color-mode="high-contrast"] #accessibility-panel select { background: #000000; color: #FFFFFF; border-color: #FFFFFF; }
:root[data-color-mode="high-contrast"] #accessibility-panel button { background: #FFFF00; color: #000000; border-color: #FFFF00; }
/* Keep labels/icons inside yellow buttons black, even with global text rules. */
:root[data-color-mode="high-contrast"] :is(.btn, .dashboard-button, .login-container button:not(.toggle-password), .login-container input[type="submit"], .segmented a.active, #accessibility-panel button) :is(span,strong,small) { color: #000000; }
/* Header icons and light-on-dark text in dark mode. */
:root[data-theme="dark"] .site-header .brand,
:root[data-theme="dark"] .site-header .primary-nav a,
:root[data-theme="dark"] .site-header .user-name,
:root[data-theme="dark"] .site-header .logout-link { color: #FFFFFF; }
:root[data-theme="dark"] .site-header .user-role { color: #D1D4E0; }
:root[data-theme="dark"] .site-header .icon-button { color: #FFFFFF; }
/* ==========================================
   DARK MODE - READABLE TEXT
   The purple tokens are used both as text colour and as the fill
   behind white text, so they are made light here (for text) and
   every purple-filled element gets an explicit dark fill below.
   ========================================== */

/* High contrast sets its own tokens, so leave it alone */
:root[data-theme="dark"]:not([data-color-mode="high-contrast"]) {
    --purple-900: #E6DCFA;
    --purple-800: #DACBF7;
    --purple-700: #C9B3F5;
}

/* Purple-filled controls keep white text on a dark purple fill */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .segmented a.active,
:root[data-theme="dark"] .version-badge,
:root[data-theme="dark"] .dashboard-button.primary,
:root[data-theme="dark"] .login-container button:not(.toggle-password),
:root[data-theme="dark"] .login-container input[type="submit"],
:root[data-theme="dark"] .catalog-pagination a,
:root[data-theme="dark"] .catalog-filter.active,
:root[data-theme="dark"] .catalog-cart-link,
:root[data-theme="dark"] .catalog-add {
    background: #6042A0;
    border-color: #6042A0;
    color: #FFFFFF;
}

:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .catalog-add:hover,
:root[data-theme="dark"] .login-container button:not(.toggle-password):hover,
:root[data-theme="dark"] .login-container input[type="submit"]:hover {
    background: #7657B7;
}

:root[data-theme="dark"] .btn:disabled {
    background: #3A3D4A;
    border-color: #3A3D4A;
    color: #A9ADBB;
}

/* Orange catalog buttons: the light dark-mode orange is too pale behind white text */
:root[data-theme="dark"] .catalog-search button,
:root[data-theme="dark"] .catalog-details,
:root[data-theme="dark"] .catalog-external {
    background: #A94F20;
    color: #FFFFFF;
}

:root[data-theme="dark"] .catalog-search button:hover,
:root[data-theme="dark"] .catalog-details:hover,
:root[data-theme="dark"] .catalog-external:hover {
    background: #8B401A;
}

/* Catalog panels are hardcoded white in catalog.css */
:root[data-theme="dark"] .catalog-search,
:root[data-theme="dark"] .catalog-card,
:root[data-theme="dark"] .catalog-empty,
:root[data-theme="dark"] .catalog-item-content,
:root[data-theme="dark"] .catalog-type-option,
:root[data-theme="dark"] .catalog-filter,
:root[data-theme="dark"] .cart-list {
    background: var(--surface);
    color: var(--ink);
}

/* Product photos stay on white, so their placeholder text stays dark */
:root[data-theme="dark"] .catalog-image-link span,
:root[data-theme="dark"] .catalog-item-image span {
    color: #4A4458;
}

:root[data-theme="dark"] .catalog-success {
    background: var(--good-bg);
    border-color: var(--good);
    color: var(--good);
}

/* Light banners keep their dark text */
:root[data-theme="dark"] .support-mode-banner,
:root[data-theme="dark"] .assume-driver-banner {
    background: #43351E;
    border-color: #6B5530;
    color: #F4D08D;
}

:root[data-theme="dark"] .assume-driver-button {
    background: #43351E;
    border-color: #6B5530;
    color: #F4D08D;
}

:root[data-theme="dark"] .assume-driver-button:hover {
    background: #54432A;
}

/* Inputs need dark backgrounds with light text */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background-color: #232632;
    color: var(--ink);
    border-color: #646879;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: #A9ADBB;
}

/* Inline-styled labels on login/apply use #555 */
:root[data-theme="dark"] .login-container label,
:root[data-theme="dark"] .auth-center label {
    color: var(--slate) !important;
}

/* ==========================================
   DARK MODE - DASHBOARD TEXT VISIBILITY FIX
   ========================================== */

/* Primary dashboard text */
:root[data-theme="dark"] .stat-value,
:root[data-theme="dark"] .row-meta-value,
:root[data-theme="dark"] .card-header h2,
:root[data-theme="dark"] .card-header h3,
:root[data-theme="dark"] .card-body h2,
:root[data-theme="dark"] .card-body h3,
:root[data-theme="dark"] .empty-state h3,
:root[data-theme="dark"] .row-title,
:root[data-theme="dark"] .action-tile h3 {
    color: var(--ink) !important;
}

/* Secondary dashboard text stays a step dimmer than headings */
:root[data-theme="dark"] .stat-label,
:root[data-theme="dark"] .stat-hint,
:root[data-theme="dark"] .card-header p,
:root[data-theme="dark"] .card-body p,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .empty-state p,
:root[data-theme="dark"] .row-sub,
:root[data-theme="dark"] .section-title,
:root[data-theme="dark"] .breadcrumb {
    color: var(--slate) !important;
}

/* Secondary buttons, including View all */
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-secondary:visited,
:root[data-theme="dark"] .btn-secondary:hover {
    background: #303440;
    color: var(--ink) !important;
    border-color: #737987;
}

/* High contrast: black text on yellow buttons */
:root[data-color-mode="high-contrast"] .btn-primary,
:root[data-color-mode="high-contrast"] .btn-accent,
:root[data-color-mode="high-contrast"] .btn-secondary,
:root[data-color-mode="high-contrast"] .dashboard-button.primary,
:root[data-color-mode="high-contrast"] .login-container button:not(.toggle-password),
:root[data-color-mode="high-contrast"] .login-container input[type="submit"],
:root[data-color-mode="high-contrast"] .segmented a.active,
:root[data-color-mode="high-contrast"] .version-badge,
:root[data-color-mode="high-contrast"] .catalog-add,
:root[data-color-mode="high-contrast"] .catalog-cart-link,
:root[data-color-mode="high-contrast"] .catalog-pagination a,
:root[data-color-mode="high-contrast"] .catalog-filter.active {
    background: #FFFF00;
    color: #000000 !important;
    border-color: #FFFF00;
}

/* ==========================================
   RED-GREEN FRIENDLY MODE
   ========================================== */

:root[data-color-mode="red-green"] {
    --a11y-primary: #315F9B;
    --a11y-primary-hover: #244A79;
    --a11y-positive: #16718C;
    --a11y-negative: #A34E90;
    --a11y-highlight: #E6F0FA;

    --good: var(--a11y-positive);
    --bad: var(--a11y-negative);
    --good-bg: #E0F3F7;
    --bad-bg: #F7E5F2;
}

/* ==========================================
   BLUE-YELLOW FRIENDLY MODE
   ========================================== */

:root[data-color-mode="blue-yellow"] {
    --a11y-primary: #8B3658;
    --a11y-primary-hover: #702B48;
    --a11y-positive: #327A59;
    --a11y-negative: #A84460;
    --a11y-highlight: #F9E8EF;

    --good: var(--a11y-positive);
    --bad: var(--a11y-negative);
    --good-bg: #E4F2E9;
    --bad-bg: #F8E7EC;
}

/* ==========================================
   APPLY COLORBLIND-FRIENDLY ACCENTS
   ========================================== */

:root[data-color-mode="red-green"] .btn-primary,
:root[data-color-mode="blue-yellow"] .btn-primary,
:root[data-color-mode="red-green"] .dashboard-button.primary,
:root[data-color-mode="blue-yellow"] .dashboard-button.primary {
    background: var(--a11y-primary);
    color: #FFFFFF;
}

:root[data-color-mode="red-green"] .btn-primary:hover,
:root[data-color-mode="blue-yellow"] .btn-primary:hover {
    background: var(--a11y-primary-hover);
}

:root[data-color-mode="red-green"] .stat-icon,
:root[data-color-mode="blue-yellow"] .stat-icon {
    background: var(--a11y-highlight);
    color: var(--a11y-primary);
}

:root[data-color-mode="red-green"] .stat-icon.green,
:root[data-color-mode="blue-yellow"] .stat-icon.green {
    background: var(--good-bg);
    color: var(--good);
}

:root[data-color-mode="red-green"] .badge-success,
:root[data-color-mode="blue-yellow"] .badge-success {
    background: var(--good-bg);
    color: var(--good);
}

:root[data-color-mode="red-green"] .badge-danger,
:root[data-color-mode="blue-yellow"] .badge-danger {
    background: var(--bad-bg);
    color: var(--bad);
}

:root[data-color-mode="red-green"] .alert-success,
:root[data-color-mode="blue-yellow"] .alert-success {
    background: var(--good-bg);
    color: var(--good);
    border-color: var(--good);
}

:root[data-color-mode="red-green"] .alert-error,
:root[data-color-mode="blue-yellow"] .alert-error {
    background: var(--bad-bg);
    color: var(--bad);
    border-color: var(--bad);
}

/* Dark mode: use lighter accents for visibility */
:root[data-theme="dark"][data-color-mode="red-green"] {
    --a11y-primary: #78B5FF;
    --a11y-primary-hover: #A2CDFF;
    --a11y-positive: #7BD4E8;
    --a11y-negative: #F0A5D7;
    --a11y-highlight: #263B53;
    --good-bg: #173842;
    --bad-bg: #42283D;
}

:root[data-theme="dark"][data-color-mode="blue-yellow"] {
    --a11y-primary: #F3A2BF;
    --a11y-primary-hover: #FFC4D7;
    --a11y-positive: #8DDBA9;
    --a11y-negative: #FF9EAE;
    --a11y-highlight: #49303C;
    --good-bg: #203D2F;
    --bad-bg: #492831;
}

/* Maintain readable foreground on light-colored dark-mode accents */
:root[data-theme="dark"][data-color-mode="red-green"] .btn-primary,
:root[data-theme="dark"][data-color-mode="blue-yellow"] .btn-primary {
    color: #111318 !important;
}

/* ==========================================
   WARM NIGHT MODE
   ========================================== */

:root[data-theme="warm"] {
    --purple-900: #F6E5D0;
    --purple-800: #E9D3B9;
    --purple-700: #E9B47A;
    --purple-500: #C98955;
    --purple-50: #3C3029;

    --orange-600: #E9B47A;
    --orange-700: #C98955;

    --ink: #F6E5D0;
    --slate: #D8C1A7;
    --muted: #C6AD93;
    --line: #655449;
    --paper: #211B19;
    --surface: #302621;

    --good: #A9D4A4;
    --good-bg: #293B2C;
    --warn: #F0CA8A;
    --warn-bg: #443526;
    --bad: #F0A8A0;
    --bad-bg: #482C2B;
}

/* Main backgrounds and text */
:root[data-theme="warm"] body,
:root[data-theme="warm"] .dashboard-page,
:root[data-theme="warm"] .login-page-wrapper {
    background: var(--paper);
    color: var(--ink);
}

:root[data-theme="warm"] .site-header {
    background: #2B201D;
    border-bottom-color: #C98955;
}

:root[data-theme="warm"] .site-header .brand,
:root[data-theme="warm"] .site-header a,
:root[data-theme="warm"] .site-header .user-name,
:root[data-theme="warm"] .site-header .user-role {
    color: #F6E5D0;
}

/* Cards and panels */
:root[data-theme="warm"] .card,
:root[data-theme="warm"] .stat-tile,
:root[data-theme="warm"] .action-tile,
:root[data-theme="warm"] .quick-link,
:root[data-theme="warm"] .dashboard-card,
:root[data-theme="warm"] .dashboard-header,
:root[data-theme="warm"] .login-container,
:root[data-theme="warm"] .login-form-side,
:root[data-theme="warm"] .auth-center {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}

/* Text */
:root[data-theme="warm"] h1,
:root[data-theme="warm"] h2,
:root[data-theme="warm"] h3,
:root[data-theme="warm"] p,
:root[data-theme="warm"] .stat-value,
:root[data-theme="warm"] .stat-label,
:root[data-theme="warm"] .card-header h2,
:root[data-theme="warm"] .empty-state h3,
:root[data-theme="warm"] .dashboard-card h2,
:root[data-theme="warm"] .dashboard-card p,
:root[data-theme="warm"] .login-container h1,
:root[data-theme="warm"] .login-container .motto {
    color: var(--ink);
}

/* Welcome banner */
:root[data-theme="warm"] .welcome-banner,
:root[data-theme="warm"] .login-side,
:root[data-theme="warm"] .feature-card {
    background: linear-gradient(120deg, #3B2824, #51372C);
    color: #F6E5D0;
}

:root[data-theme="warm"] .welcome-banner h1,
:root[data-theme="warm"] .welcome-banner p,
:root[data-theme="warm"] .login-side h2,
:root[data-theme="warm"] .login-side p,
:root[data-theme="warm"] .feature-card h2,
:root[data-theme="warm"] .feature-card p {
    color: #F6E5D0;
}

/* Buttons */
:root[data-theme="warm"] .btn-primary,
:root[data-theme="warm"] .btn-accent,
:root[data-theme="warm"] .dashboard-button.primary,
:root[data-theme="warm"] .login-container button:not(.toggle-password),
:root[data-theme="warm"] .login-container input[type="submit"] {
    background: #C98955;
    color: #211B19;
}

:root[data-theme="warm"] .btn-secondary,
:root[data-theme="warm"] .create-account-btn {
    background: #3C3029;
    color: #F6E5D0;
    border-color: var(--line);
}

/* Form fields */
:root[data-theme="warm"] input,
:root[data-theme="warm"] select,
:root[data-theme="warm"] textarea {
    background: #3C3029;
    color: #F6E5D0;
    border-color: var(--line);
}

:root[data-theme="warm"] input::placeholder,
:root[data-theme="warm"] textarea::placeholder {
    color: #D8C1A7;
}

/* Dashboard table headers */
:root[data-theme="warm"] .data-table th {
    background: #3C3029;
    color: #F6E5D0;
}

/* Status and other shared components */
:root[data-theme="warm"] .badge,
:root[data-theme="warm"] .stat-icon {
    background: #3C3029;
    color: #E9B47A;
}

/* Accessibility settings popup */
:root[data-theme="warm"] #accessibility-panel,
:root[data-theme="warm"] #accessibility-button {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
}

:root[data-theme="warm"] #accessibility-panel select,
:root[data-theme="warm"] .accessibility-actions button {
    background: #3C3029;
    color: #F6E5D0;
    border-color: var(--line);
}
/* ==========================================
   WARM NIGHT MODE - INVITE DRIVER BUTTON FIX
   ========================================== */

:root[data-theme="warm"] .welcome-banner .btn-light {
    background: #E9B47A;
    color: #211B19 !important;
    border: 1px solid #E9B47A;
    font-weight: 600;
}

:root[data-theme="warm"] .welcome-banner .btn-light:hover {
    background: #F6C995;
    color: #211B19 !important;
    border-color: #F6C995;
}

/* Keyboard accessibility */
:root[data-theme="warm"] .welcome-banner .btn-light:focus-visible {
    outline: 3px solid #F6E5D0;
    outline-offset: 3px;
}
:root[data-theme="warm"][data-color-mode="high-contrast"]
.welcome-banner .btn-light {
    background: #FFFF00;
    color: #000000 !important;
    border-color: #FFFF00;
}