/* ============================================================
   BRAINFLOOD MARKETING — THEME BRIDGE
   ============================================================
   Overrides hardcoded Tailwind utility colors and custom CSS
   with theme-aware CSS variables from themes.css.
   Loaded AFTER themes.css and the inlined Tailwind CSS.
   ============================================================ */

/* ---- Base overrides ---- */
html[data-theme] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* ---- Text color utilities ---- */
html[data-theme] .text-white {
    color: var(--text-primary);
}
html[data-theme] .text-white\/70 {
    color: var(--color-text-200);
}
html[data-theme] .text-slate-300 {
    color: var(--color-text-200);
}
html[data-theme] .text-slate-400 {
    color: var(--color-text-300);
}
html[data-theme] .text-slate-500 {
    color: var(--color-text-400);
}
html[data-theme] .text-slate-600 {
    color: var(--color-text-500);
}
html[data-theme] .text-slate-700 {
    color: var(--color-text-500);
}

/* Accent / brand text */
html[data-theme] .text-brand-300 {
    color: var(--accent-light);
}
html[data-theme] .text-brand-400 {
    color: var(--accent);
}

/* Semantic "electric" colors → theme tokens */
html[data-theme] .text-electric-green {
    color: var(--color-success);
}
html[data-theme] .text-electric-cyan {
    color: var(--color-secondary);
}
html[data-theme] .text-electric-pink {
    color: var(--color-pink);
}
html[data-theme] .text-electric-yellow {
    color: var(--color-warning);
}
html[data-theme] .text-red-400 {
    color: var(--color-danger);
}
html[data-theme] .text-orange-400 {
    color: var(--color-orange);
}
html[data-theme] .text-amber-600 {
    color: var(--color-warning-dark);
}

/* Hover text */
html[data-theme] .hover\:text-white:hover {
    color: var(--text-primary);
}
html[data-theme] .hover\:text-brand-300:hover {
    color: var(--accent-light);
}
html[data-theme] .hover\:text-brand-400:hover {
    color: var(--accent);
}
html[data-theme] .group:hover .group-hover\:text-white {
    color: var(--text-primary);
}
html[data-theme] .group:hover .group-hover\:text-brand-400 {
    color: var(--accent);
}

/* ---- Background color utilities ---- */
html[data-theme] .bg-surface-900 {
    background-color: var(--bg-primary);
}
html[data-theme] .bg-surface-900\/98 {
    background-color: color-mix(in srgb, var(--bg-primary) 98%, transparent);
}
html[data-theme] .bg-surface-800 {
    background-color: var(--bg-secondary);
}
html[data-theme] .bg-surface-800\/80 {
    background-color: color-mix(in srgb, var(--bg-secondary) 80%, transparent);
}
html[data-theme] .bg-surface-700 {
    background-color: var(--bg-secondary);
}
html[data-theme] .bg-surface-700\/50 {
    background-color: color-mix(in srgb, var(--bg-secondary) 50%, transparent);
}
html[data-theme] .bg-surface-600 {
    background-color: var(--bg-tertiary);
}
html[data-theme] .bg-surface-600\/50 {
    background-color: color-mix(in srgb, var(--bg-tertiary) 50%, transparent);
}
html[data-theme] .bg-white\/5 {
    background-color: rgba(var(--glass-overlay-color), 0.05);
}
html[data-theme] .hover\:bg-white\/5:hover {
    background-color: rgba(var(--glass-overlay-color), 0.05);
}
html[data-theme] .bg-white {
    background-color: rgba(var(--glass-overlay-color), 1);
}
html[data-theme] .bg-slate-600 {
    background-color: var(--bg-tertiary);
}
html[data-theme] .bg-slate-600\/50 {
    background-color: color-mix(in srgb, var(--bg-tertiary) 50%, transparent);
}

/* Brand/accent backgrounds */
html[data-theme] .bg-brand-400 {
    background-color: var(--accent-light);
}
html[data-theme] .bg-brand-400\/10 {
    background-color: rgba(var(--accent-rgb), 0.1);
}
html[data-theme] .bg-brand-400\/15 {
    background-color: rgba(var(--accent-rgb), 0.15);
}
html[data-theme] .bg-brand-500 {
    background-color: var(--accent);
}
html[data-theme] .bg-brand-500\/10 {
    background-color: rgba(var(--accent-rgb), 0.1);
}
html[data-theme] .bg-brand-500\/15 {
    background-color: rgba(var(--accent-rgb), 0.15);
}
html[data-theme] .bg-brand-500\/20 {
    background-color: rgba(var(--accent-rgb), 0.2);
}

/* Electric backgrounds */
html[data-theme] .bg-electric-green {
    background-color: var(--color-success);
}
html[data-theme] .bg-electric-green\/10 {
    background-color: rgba(var(--success-rgb), 0.1);
}
html[data-theme] .bg-electric-green\/15 {
    background-color: rgba(var(--success-rgb), 0.15);
}
html[data-theme] .bg-electric-green\/20 {
    background-color: rgba(var(--success-rgb), 0.2);
}
html[data-theme] .bg-electric-cyan {
    background-color: var(--color-secondary);
}
html[data-theme] .bg-electric-cyan\/5 {
    background-color: rgba(var(--secondary-rgb), 0.05);
}
html[data-theme] .bg-electric-cyan\/10 {
    background-color: rgba(var(--secondary-rgb), 0.1);
}
html[data-theme] .bg-electric-cyan\/15 {
    background-color: rgba(var(--secondary-rgb), 0.15);
}
html[data-theme] .bg-electric-cyan\/20 {
    background-color: rgba(var(--secondary-rgb), 0.2);
}
html[data-theme] .bg-electric-pink {
    background-color: var(--color-pink);
}
html[data-theme] .bg-electric-pink\/10 {
    background-color: rgba(var(--pink-rgb), 0.1);
}
html[data-theme] .bg-electric-pink\/15 {
    background-color: rgba(var(--pink-rgb), 0.15);
}
html[data-theme] .bg-electric-yellow {
    background-color: var(--color-warning);
}
html[data-theme] .bg-electric-yellow\/10 {
    background-color: rgba(var(--warning-rgb), 0.1);
}
html[data-theme] .bg-electric-yellow\/15 {
    background-color: rgba(var(--warning-rgb), 0.15);
}
html[data-theme] .bg-electric-yellow\/20 {
    background-color: rgba(var(--warning-rgb), 0.2);
}

/* Status backgrounds */
html[data-theme] .bg-green-500 {
    background-color: var(--color-success);
}
html[data-theme] .bg-green-500\/60 {
    background-color: rgba(var(--success-rgb), 0.6);
}
html[data-theme] .bg-red-500 {
    background-color: var(--color-danger);
}
html[data-theme] .bg-red-500\/20 {
    background-color: rgba(var(--danger-rgb), 0.2);
}
html[data-theme] .bg-red-500\/60 {
    background-color: rgba(var(--danger-rgb), 0.6);
}
html[data-theme] .bg-yellow-500 {
    background-color: var(--color-warning);
}
html[data-theme] .bg-yellow-500\/60 {
    background-color: rgba(var(--warning-rgb), 0.6);
}

/* ---- Border color utilities ---- */
html[data-theme] .border-white\/5 {
    border-color: rgba(var(--glass-overlay-color), 0.05);
}
html[data-theme] .border-white\/10 {
    border-color: rgba(var(--glass-overlay-color), 0.1);
}
html[data-theme] .border-white {
    border-color: rgba(var(--glass-overlay-color), 1);
}
html[data-theme] .hover\:border-white\/10:hover {
    border-color: rgba(var(--glass-overlay-color), 0.1);
}
html[data-theme] .border-slate-700 {
    border-color: rgba(var(--glass-overlay-color), 0.1);
}

/* Brand/accent borders */
html[data-theme] .border-brand-400 {
    border-color: var(--accent-light);
}
html[data-theme] .border-brand-400\/10 {
    border-color: rgba(var(--accent-rgb), 0.1);
}
html[data-theme] .border-brand-400\/20 {
    border-color: rgba(var(--accent-rgb), 0.2);
}
html[data-theme] .border-brand-500 {
    border-color: var(--accent);
}
html[data-theme] .border-brand-500\/30 {
    border-color: rgba(var(--accent-rgb), 0.3);
}
html[data-theme] .hover\:border-brand-400\/30:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
}
html[data-theme] .hover\:border-brand-400\/40:hover {
    border-color: rgba(var(--accent-rgb), 0.4);
}
html[data-theme] .hover\:border-brand-500\/50:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
}

/* Electric borders */
html[data-theme] .border-electric-cyan {
    border-color: var(--color-secondary);
}
html[data-theme] .border-electric-cyan\/30 {
    border-color: rgba(var(--secondary-rgb), 0.3);
}
html[data-theme] .hover\:border-electric-cyan\/30:hover {
    border-color: rgba(var(--secondary-rgb), 0.3);
}
html[data-theme] .border-electric-green {
    border-color: var(--color-success);
}
html[data-theme] .border-electric-green\/20 {
    border-color: rgba(var(--success-rgb), 0.2);
}
html[data-theme] .border-electric-green\/30 {
    border-color: rgba(var(--success-rgb), 0.3);
}
html[data-theme] .border-electric-green\/40 {
    border-color: rgba(var(--success-rgb), 0.4);
}
html[data-theme] .hover\:border-electric-green\/30:hover {
    border-color: rgba(var(--success-rgb), 0.3);
}
html[data-theme] .border-electric-pink {
    border-color: var(--color-pink);
}
html[data-theme] .border-electric-pink\/30 {
    border-color: rgba(var(--pink-rgb), 0.3);
}
html[data-theme] .hover\:border-electric-pink\/30:hover {
    border-color: rgba(var(--pink-rgb), 0.3);
}
html[data-theme] .border-electric-yellow {
    border-color: var(--color-warning);
}
html[data-theme] .border-electric-yellow\/10 {
    border-color: rgba(var(--warning-rgb), 0.1);
}
html[data-theme] .border-electric-yellow\/20 {
    border-color: rgba(var(--warning-rgb), 0.2);
}
html[data-theme] .border-electric-yellow\/30 {
    border-color: rgba(var(--warning-rgb), 0.3);
}
html[data-theme] .border-electric-yellow\/40 {
    border-color: rgba(var(--warning-rgb), 0.4);
}
html[data-theme] .hover\:border-electric-yellow\/30:hover {
    border-color: rgba(var(--warning-rgb), 0.3);
}
html[data-theme] .hover\:border-electric-yellow\/40:hover {
    border-color: rgba(var(--warning-rgb), 0.4);
}
html[data-theme] .border-red-500 {
    border-color: var(--color-danger);
}
html[data-theme] .border-red-500\/50 {
    border-color: rgba(var(--danger-rgb), 0.5);
}

/* ---- Gradient utilities ---- */
html[data-theme] .from-surface-900 {
    --tw-gradient-from: var(--bg-primary) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(var(--color-base-darkest-rgb), 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme] .to-surface-900 {
    --tw-gradient-to: var(--bg-primary) var(--tw-gradient-to-position);
}
html[data-theme] .from-brand-400 {
    --tw-gradient-from: var(--accent-light) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(var(--accent-rgb), 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme] .from-brand-500 {
    --tw-gradient-from: var(--accent) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(var(--accent-rgb), 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme] .to-brand-400 {
    --tw-gradient-to: var(--accent-light) var(--tw-gradient-to-position);
}
html[data-theme] .via-brand-800 {
    --tw-gradient-to: rgba(var(--accent-rgb), 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--accent-dark) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme] .via-brand-800\/20 {
    --tw-gradient-to: rgba(var(--accent-rgb), 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgba(var(--accent-rgb), 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme] .from-electric-green {
    --tw-gradient-from: var(--color-success) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(var(--success-rgb), 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme] .from-electric-green\/80 {
    --tw-gradient-from: rgba(var(--success-rgb), 0.8) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(var(--success-rgb), 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme] .to-electric-green {
    --tw-gradient-to: var(--color-success) var(--tw-gradient-to-position);
}
html[data-theme] .from-electric-cyan {
    --tw-gradient-from: var(--color-secondary) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(var(--secondary-rgb), 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme] .to-electric-cyan {
    --tw-gradient-to: var(--color-secondary) var(--tw-gradient-to-position);
}
html[data-theme] .to-electric-cyan\/80 {
    --tw-gradient-to: rgba(var(--secondary-rgb), 0.8) var(--tw-gradient-to-position);
}
html[data-theme] .via-electric-cyan {
    --tw-gradient-to: rgba(var(--secondary-rgb), 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--color-secondary) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme] .from-electric-pink {
    --tw-gradient-from: var(--color-pink) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(var(--pink-rgb), 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme] .to-electric-pink {
    --tw-gradient-to: var(--color-pink) var(--tw-gradient-to-position);
}
html[data-theme] .via-electric-pink {
    --tw-gradient-to: rgba(var(--pink-rgb), 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--color-pink) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
html[data-theme] .from-electric-yellow {
    --tw-gradient-from: var(--color-warning) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(var(--warning-rgb), 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme] .to-electric-yellow {
    --tw-gradient-to: var(--color-warning) var(--tw-gradient-to-position);
}

/* Shadow */
html[data-theme] .shadow-brand-500 {
    --tw-shadow-color: var(--accent);
    --tw-shadow: var(--tw-shadow-colored);
}
html[data-theme] .hover\:shadow-brand-500\/25:hover {
    --tw-shadow-color: rgba(var(--accent-rgb), 0.25);
    --tw-shadow: var(--tw-shadow-colored);
}

/* ---- Custom class overrides ---- */

/* Hero gradient */
html[data-theme] .hero-gradient {
    background:
        radial-gradient(ellipse 80% 60% at 50% -20%, var(--glow-primary) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 50%, var(--glow-secondary) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 20% 80%, var(--glow-tertiary) 0%, transparent 50%);
}

/* Glow effects */
html[data-theme] .glow-purple {
    box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.3), 0 0 80px rgba(var(--accent-rgb), 0.1);
}
html[data-theme] .glow-cyan {
    box-shadow: 0 0 40px rgba(var(--secondary-rgb), 0.3), 0 0 80px rgba(var(--secondary-rgb), 0.1);
}
html[data-theme] .glow-yellow {
    box-shadow: 0 0 40px rgba(var(--warning-rgb), 0.3), 0 0 80px rgba(var(--warning-rgb), 0.1);
}
html[data-theme] .text-glow {
    text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.5);
}
html[data-theme] .text-glow-cyan {
    text-shadow: 0 0 30px rgba(var(--secondary-rgb), 0.5);
}

/* Glass card */
html[data-theme] .glass {
    background: rgba(var(--glass-overlay-color), 0.03);
    border: 1px solid rgba(var(--glass-overlay-color), 0.06);
    backdrop-filter: blur(12px);
}

/* Border gradient pseudo-element */
html[data-theme] .border-gradient::after {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.6), rgba(var(--secondary-rgb), 0.6), rgba(var(--pink-rgb), 0.6));
}

/* Pricing popular card */
html[data-theme] .pricing-popular {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--secondary-rgb), 0.08));
    border: 1px solid rgba(var(--accent-rgb), 0.4);
}

/* Grid pattern */
html[data-theme] .grid-pattern {
    background-image: linear-gradient(rgba(var(--accent-rgb), 0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(var(--accent-rgb), 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Shimmer button - keeps legible text on accent bg */
html[data-theme] .btn-shimmer {
    background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
    background-size: 200% auto;
    color: var(--btn-accent-text);
}

/* Dev banner */
html[data-theme] .dev-banner {
    background: rgba(var(--accent-rgb), 0.12);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.25);
    color: var(--color-text-300);
}
html[data-theme] .dev-banner svg {
    color: var(--accent);
}

/* Navbar blur */
html[data-theme] .nav-blur {
    backdrop-filter: blur(16px);
    background: rgba(var(--color-base-darkest-rgb), 0.8);
}

/* Waitlist modal */
html[data-theme] .waitlist-modal {
    background: var(--bg-secondary);
    border: 1px solid rgba(var(--glass-overlay-color), 0.08);
    box-shadow: 0 24px 64px rgba(var(--glass-overlay-color-inv), 0.5), 0 0 40px rgba(var(--accent-rgb), 0.1);
}
html[data-theme] .waitlist-close {
    color: var(--color-text-400);
}
html[data-theme] .waitlist-close:hover {
    color: var(--text-primary);
    background: rgba(var(--glass-overlay-color), 0.05);
}
html[data-theme] .waitlist-badge {
    background: linear-gradient(135deg, var(--accent), var(--color-secondary));
    color: var(--btn-accent-text);
}
html[data-theme] .waitlist-title {
    color: var(--text-primary);
}
html[data-theme] .waitlist-body {
    color: var(--color-text-300);
}
html[data-theme] .waitlist-body strong {
    color: var(--text-primary);
}
html[data-theme] .waitlist-input {
    border: 1px solid rgba(var(--glass-overlay-color), 0.1);
    background: rgba(var(--glass-overlay-color), 0.05);
    color: var(--text-primary);
}
html[data-theme] .waitlist-input::placeholder {
    color: var(--color-text-500);
}
html[data-theme] .waitlist-input:focus {
    border-color: var(--accent);
}
html[data-theme] .waitlist-submit {
    background: var(--accent);
    color: var(--btn-accent-text);
}
html[data-theme] .waitlist-submit:hover {
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
}
html[data-theme] .waitlist-note {
    color: var(--color-text-500);
}

/* Scrollbar */
html[data-theme] ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
html[data-theme] ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
}
html[data-theme] ::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* Noise overlay - reduce for light themes */
html[data-theme="arctic"] .noise::after,
html[data-theme="ivory"] .noise::after,
html[data-theme="rose"] .noise::after,
html[data-theme="sage"] .noise::after {
    opacity: 0.03;
}

/* Mobile menu overlay */
html[data-theme] .mobile-menu {
    background: color-mix(in srgb, var(--bg-primary) 98%, transparent);
}

/* Decorative orbs - use theme glow colors */
html[data-theme] .animate-pulse-glow {
    opacity: 0.6;
}

/* ---- Light theme specific fixes ---- */
html[data-theme="arctic"],
html[data-theme="ivory"],
html[data-theme="rose"],
html[data-theme="sage"] {
    color-scheme: light;
}

/* Competitor price strikethrough */
html[data-theme] .competitor-price {
    color: var(--color-text-300);
}
html[data-theme] .competitor-price::after {
    background: var(--color-danger);
}

/* Ensure CTA buttons always have legible text on accent backgrounds */
html[data-theme] .btn-shimmer,
html[data-theme] [class*="bg-brand-500"] a,
html[data-theme] [class*="bg-brand-400"] a {
    color: var(--btn-accent-text);
}

/* ---- Navbar Theme Switcher ---- */
.theme-nav-wrapper {
    position: relative;
}

.theme-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(var(--glass-overlay-color), 0.12);
    background: rgba(var(--glass-overlay-color), 0.06);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.theme-nav-btn:hover {
    background: rgba(var(--glass-overlay-color), 0.12);
    color: var(--text-primary);
    transform: scale(1.05);
}

.theme-nav-panel {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid rgba(var(--glass-overlay-color), 0.1);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(var(--glass-overlay-color-inv), 0.3);
    z-index: 100;
    flex-wrap: wrap;
    width: 230px;
    justify-content: center;
}

.theme-nav-panel.open {
    display: flex;
}

.theme-nav-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
    flex-shrink: 0;
}

.theme-nav-swatch:hover {
    transform: scale(1.15);
}

.theme-nav-swatch.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.3);
}

/* Mobile theme swatches (inline in mobile menu) */
.theme-mobile-swatches {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.5rem 0;
}

.theme-mobile-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.theme-mobile-swatch:hover {
    transform: scale(1.1);
}

.theme-mobile-swatch.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.3);
}

/* Hide floating toggle on main page (navbar has the switcher) */
.has-nav-theme .theme-float-wrapper {
    display: none;
}