[data-theme="dark"] {
    --bg-body: #000000;
    --text-body: #F5F5F7;
    --text-secondary: #98989D;
    --bg-card-el: #1C1C1E;
    --border-card-el: rgba(255, 255, 255, 0.05);
    --shadow-card-el: 0 0 0 0 transparent;
    --text-muted-el: rgba(255, 255, 255, 0.3);
    --glow-1-op: 0.04;
    --glow-2-op: 0.04;
    --glow-3-op: 0.02;
    --bg-btn: rgba(255, 255, 255, 0.06);
    --border-btn: rgba(255, 255, 255, 0.08);
    --text-btn: #F5F5F7;
    --input-bg: rgba(255, 255, 255, 0.06);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-text: #F5F5F7;
    --input-placeholder: rgba(255, 255, 255, 0.2);
}

[data-theme="light"] {
    --bg-body: #FFFFFF;
    --text-body: #1D1D1F;
    --text-secondary: #6E6E73;
    --bg-card-el: #FFFFFF;
    --border-card-el: rgba(0, 0, 0, 0.06);
    --shadow-card-el: 0 2px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03);
    --text-muted-el: #A1A1A6;
    --glow-1-op: 0;
    --glow-2-op: 0;
    --glow-3-op: 0;
    --bg-btn: rgba(0, 0, 0, 0.03);
    --border-btn: rgba(0, 0, 0, 0.06);
    --text-btn: #1D1D1F;
    --input-bg: #F5F5F7;
    --input-border: rgba(0, 0, 0, 0.06);
    --input-text: #1D1D1F;
    --input-placeholder: rgba(0, 0, 0, 0.2);
}

.bg-theme { background-color: var(--bg-body); }
.text-theme { color: var(--text-body); }
.text-theme-secondary { color: var(--text-secondary); }
.text-theme-muted { color: var(--text-muted-el); }
.shadow-card { box-shadow: var(--shadow-card-el); }
.opacity-glow-1 { opacity: var(--glow-1-op); }
.opacity-glow-2 { opacity: var(--glow-2-op); }
.opacity-glow-3 { opacity: var(--glow-3-op); }
.bg-card { background-color: var(--bg-btn); }
.border-card { border-color: var(--border-btn); }
.bg-elevated { background-color: var(--bg-card-el); }
.input-theme {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-theme::placeholder { color: var(--input-placeholder); }
.input-theme:focus {
    border-color: #0066FF;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15);
}
.apple-card {
    background-color: var(--bg-card-el);
    border-radius: 16px;
    border: 1px solid var(--border-card-el);
    box-shadow: var(--shadow-card-el);
    padding: 1.5rem;
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}
.sidebar-link:hover {
    background-color: var(--bg-btn);
    color: var(--text-body);
}
.sidebar-link-active {
    background: rgba(0, 102, 255, 0.1);
    color: #0066FF;
    font-weight: 500;
}
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-body);
    background-color: var(--bg-btn);
    border: 1px solid var(--border-btn);
    transition: all 0.15s ease;
    cursor: pointer;
}
.btn-ghost:hover {
    opacity: 0.8;
}
.status-badge {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* ====================================================== */
/* LIGHT MODE OVERRIDES — keeps the VEXA identity   */
/* while switching dark-glass tokens to light surfaces.  */
/* ====================================================== */

/* Page background */
[data-theme="light"] body {
    background-color: #F5F7FA !important;
}

/* Primary text → dark ink (all opacity variants used across the app) */
[data-theme="light"] .text-white { color: #1A1A2E !important; }
[data-theme="light"] .text-white\/90 { color: rgba(26,26,46,0.93) !important; }
[data-theme="light"] .text-white\/85 { color: rgba(26,26,46,0.88) !important; }
[data-theme="light"] .text-white\/80 { color: rgba(26,26,46,0.85) !important; }
[data-theme="light"] .text-white\/75 { color: rgba(26,26,46,0.78) !important; }
[data-theme="light"] .text-white\/70 { color: rgba(26,26,46,0.75) !important; }
[data-theme="light"] .text-white\/65 { color: rgba(26,26,46,0.70) !important; }
[data-theme="light"] .text-white\/60 { color: rgba(26,26,46,0.65) !important; }
[data-theme="light"] .text-white\/55 { color: rgba(26,26,46,0.58) !important; }
[data-theme="light"] .text-white\/50 { color: rgba(26,26,46,0.55) !important; }
[data-theme="light"] .text-white\/45 { color: rgba(26,26,46,0.50) !important; }
[data-theme="light"] .text-white\/40 { color: rgba(26,26,46,0.45) !important; }
[data-theme="light"] .text-white\/35 { color: rgba(26,26,46,0.38) !important; }
[data-theme="light"] .text-white\/30 { color: rgba(26,26,46,0.35) !important; }
[data-theme="light"] .text-white\/25 { color: rgba(26,26,46,0.28) !important; }
[data-theme="light"] .text-white\/20 { color: rgba(26,26,46,0.25) !important; }
[data-theme="light"] .text-white\/15 { color: rgba(26,26,46,0.18) !important; }
[data-theme="light"] .text-white\/10 { color: rgba(26,26,46,0.12) !important; }

/* Brand accent colors → darker variants for light backgrounds */
[data-theme="light"] .text-\[\#00D9FF\] { color: #0077AA !important; }
[data-theme="light"] .text-\[\#39FF14\] { color: #1A8C00 !important; }
[data-theme="light"] .neon-text-green { color: #1A8C00 !important; }
[data-theme="light"] .neon-text-cyan { color: #0077AA !important; }

/* Glass surfaces → light panels (with soft shadow so they
   stay distinct from the light page background) */
[data-theme="light"] .bg-white\/\[0\.02\],
[data-theme="light"] .bg-white\/\[0\.03\],
[data-theme="light"] .bg-white\/\[0\.015\],
[data-theme="light"] .bg-white\/\[0\.04\],
[data-theme="light"] .bg-white\/\[0\.05\] {
    background-color: rgba(255,255,255,0.85) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

/* Borders → soft dark */
[data-theme="light"] .border-white\/\[0\.03\],
[data-theme="light"] .border-white\/\[0\.05\],
[data-theme="light"] .border-white\/\[0\.08\],
[data-theme="light"] .border-white\/\[0\.10\] {
    border-color: rgba(0,0,0,0.07) !important;
}
[data-theme="light"] .border-white\/5 { border-color: rgba(0,0,0,0.07) !important; }
[data-theme="light"] .border-white\/10 { border-color: rgba(0,0,0,0.08) !important; }

/* Keep WHITE text on brand gradient buttons + dark avatars only */
/* (light-blue icon chips keep their own brand-colored svg) */
[data-theme="light"] .bg-gradient-to-r,
[data-theme="light"] .bg-gradient-to-r *,
[data-theme="light"] .from-\[\#071B34\],
[data-theme="light"] .from-\[\#071B34\] * { color: #ffffff !important; }

/* Dark dropdown / navy panels → light in light mode */
[data-theme="light"] .bg-\[\#071B34\] {
    background-color: #FFFFFF !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* Sidebar + topbar glass → light */
[data-theme="light"] .glass-sidebar {
    background: rgba(255,255,255,0.85) !important;
    border-inline-end: 1px solid rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .glass-topbar {
    background: rgba(255,255,255,0.6) !important;
}

/* Soften ambient glows on light background */
[data-theme="light"] .bg-ambient-blue {
    background: radial-gradient(circle at 20% 80%, rgba(0,102,255,0.06) 0%, transparent 60%);
}
[data-theme="light"] .bg-ambient-green {
    background: radial-gradient(circle at 80% 20%, rgba(57,255,20,0.04) 0%, transparent 60%);
}
[data-theme="light"] .bg-glow-blue {
    background: radial-gradient(circle, rgba(0,102,255,0.08) 0%, rgba(0,0,0,0) 70%);
}
[data-theme="light"] .bg-glow-green {
    background: radial-gradient(circle, rgba(57,255,20,0.05) 0%, rgba(0,0,0,0) 70%);
}

/* Form controls → light */
[data-theme="light"] .vexa-input,
[data-theme="light"] .vexa-select {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(0,0,0,0.1) !important;
    color: #1A1A2E !important;
}
[data-theme="light"] .vexa-input::placeholder { color: rgba(0,0,0,0.3) !important; }
[data-theme="light"] .vexa-input:focus,
[data-theme="light"] .vexa-select:focus {
    border-color: rgba(0,102,255,0.5) !important;
    box-shadow: 0 0 0 3px rgba(0,102,255,0.1) !important;
}

/* Fix hover/active text disappearing in light mode */
[data-theme="light"] .hover\:text-white:hover,
[data-theme="light"] .hover\:text-theme:hover,
[data-theme="light"] .group:hover .group-hover\:text-white {
    color: #1A1A2E !important;
}

/* Specific active state fix for navs */
[data-theme="light"] .sidebar-link-active {
    color: #0066FF !important; /* Keep brand blue for active */
}

/* Fix select option backgrounds in light mode */
[data-theme="light"] select option {
    background-color: #FFFFFF !important;
    color: #1A1A2E !important;
}

/* Step badge inner circle → light in light mode (keep number readable) */
[data-theme="light"] .step-inner { background: #ffffff !important; }

/* Scrolled header + mobile menu keep WHITE text in light mode
   (their background turns dark on scroll, so the light-mode
   .text-white override must NOT darken them). */
[data-theme="light"] header.bg-black\/70,
[data-theme="light"] header.bg-black\/70 *,
[data-theme="light"] div.bg-black\/80,
[data-theme="light"] div.bg-black\/80 * {
    color: #ffffff !important;
}