/* ============================================================
   VoteReederXP — LIGHT THEME (shared parts)
   ------------------------------------------------------------
   Every rule is scoped to html[data-theme="light"], so in dark mode this file
   matches nothing and the site looks exactly as it always has.

   How the attribute gets there:
   • Before first paint — the two-line snippet at the end of every page's <head>
     reads localStorage 'vrx-theme'. No dark flash for a light-mode reader.
   • After sign-in — shared.js (window.vrxTheme) applies the choice saved on the
     account (auth user_metadata.theme), so it follows people to other devices.
   • Chosen on the Profile page, or during setup on register2.html.

   This file covers what every page shares: style.css variables, the injected nav,
   ☰ menu, footer, login modal, form inputs and the light/dark picker. Anything a
   page styles for itself lives in that page's own <style id="light-theme"> block.

   PALETTE — for older eyes on a light background: black text, purple accents.
   The neon originals (#00f0ff, #ffd700, #00ff88, #ff00aa) are 1.1–3.2:1 on white,
   i.e. close to invisible. Every text colour below is at least 5:1 on all three
   light surfaces (computed, WCAG relative luminance).
   ============================================================ */
html[data-theme="light"]{
  color-scheme: light;
  --lt-bg:#f5f3fa;          /* page background */
  --lt-surface:#ffffff;     /* cards, panels, nav */
  --lt-surface-2:#ede8f6;   /* inset rows, chips, hover */
  --lt-border:#cfc4e3;
  --lt-text:#111111;        /* body text */
  --lt-text-2:#3a3a48;      /* secondary text — still near-black */
  --lt-muted:#5c5c6e;       /* hints, timestamps */
  --lt-purple:#5b0fa8;      /* headings, labels, links, active states */
  --lt-purple-2:#7a1fd1;
  --lt-blue:#0b57d0;        /* stands in for neon cyan */
  --lt-pink:#a3004f;        /* stands in for neon pink */
  --lt-gold:#7a4f00;        /* stands in for neon gold (dark amber) */
  --lt-green:#0a6b35;       /* stands in for neon green */
  --lt-red:#b3261e;

  /* style.css variables — pages built on these flip without page-specific rules */
  --bg-deep:var(--lt-bg);
  --bg-panel:var(--lt-surface);
  --bg-card:var(--lt-surface);
  --neon-blue:var(--lt-purple);
  --neon-purple:var(--lt-purple);
  --neon-pink:var(--lt-pink);
  --neon-gold:var(--lt-gold);
  --neon-green:var(--lt-green);
  --text:var(--lt-text);
  --text-primary:var(--lt-text);
  --text-dim:var(--lt-text-2);
  --border-glow:var(--lt-border);
  --gradient-neon:linear-gradient(90deg,var(--lt-purple),var(--lt-purple));
  --pink:var(--lt-pink);
  --dim:var(--lt-text-2);
}

/* ── PAGE ── */
html[data-theme="light"],
html[data-theme="light"] body{ background:var(--lt-bg)!important; color:var(--lt-text)!important; }
/* neon glow halos blur dark text on a light background */
html[data-theme="light"] *{ text-shadow:none!important; }
/* style.css scanlines + colour wash, and the starfield backdrop some pages draw */
html[data-theme="light"] body::before,
html[data-theme="light"] body::after{ display:none!important; }
html[data-theme="light"] .bg{ background:var(--lt-bg)!important; }
html[data-theme="light"] .neb1,
html[data-theme="light"] .neb2,
html[data-theme="light"] .stars{ display:none!important; }

/* gradient-clipped headline text → solid purple */
html[data-theme="light"] .page-title,
html[data-theme="light"] .section-title,
html[data-theme="light"] .footer-logo,
html[data-theme="light"] .auth-title,
html[data-theme="light"] .nav-logo{
  background:none!important; -webkit-text-fill-color:var(--lt-purple)!important;
  color:var(--lt-purple)!important; filter:none!important;
}

/* ── style.css COMPONENTS ── */
html[data-theme="light"] .card{ border-color:var(--lt-border)!important; backdrop-filter:none!important; }
html[data-theme="light"] .section-alt{ background:var(--lt-surface-2)!important; }
/* :where() — some pages reuse .xp-badge for other chips (profile.html's status chips);
   their own light rules must win over this gold default. */
html[data-theme="light"] :where(.xp-badge){ background:#fff4d6!important; border-color:#d9b25c!important; color:var(--lt-gold)!important; }
html[data-theme="light"] .page-hero::before{ display:none!important; }
/* style.css buttons: neon fills + glows, and .btn-pink fades to #ff6600 under white text
   (~2.9:1). :where() keeps these at low specificity so a page's own
   <style id="light-theme"> choice for the same button still wins. */
html[data-theme="light"] :where(.btn-blue){ background:var(--lt-blue)!important; color:#fff!important; box-shadow:none!important; }
html[data-theme="light"] :where(.btn-purple){ background:var(--lt-purple)!important; color:#fff!important; box-shadow:none!important; }
html[data-theme="light"] :where(.btn-pink){ background:var(--lt-pink)!important; color:#fff!important; box-shadow:none!important; }
html[data-theme="light"] :where(.btn-outline){ background:transparent!important; color:var(--lt-purple)!important; border-color:var(--lt-purple)!important; box-shadow:none!important; }

/* ── NAV (shared.js injected nav AND game.html's own .topbar) ── */
html[data-theme="light"] .topbar{ background:var(--lt-surface)!important; border-bottom:1px solid var(--lt-border)!important; backdrop-filter:none!important; box-shadow:0 1px 6px rgba(40,20,80,0.08)!important; }
html[data-theme="light"] .topbar .nav-row{ background:var(--lt-surface)!important; border-bottom-color:var(--lt-border)!important; }
html[data-theme="light"] .topbar .nl{ color:var(--lt-text-2)!important; }
html[data-theme="light"] .topbar .nl:hover{ color:var(--lt-text)!important; }
html[data-theme="light"] .topbar .nl.active,
html[data-theme="light"] .topbar .nl.a{ color:var(--lt-purple)!important; border-bottom-color:var(--lt-purple)!important; }
html[data-theme="light"] .topbar .nav-donate{ color:var(--lt-gold)!important; border-color:#b9892e!important; background:transparent!important; box-shadow:none!important; }
html[data-theme="light"] .topbar .nav-login{ color:var(--lt-purple)!important; }
html[data-theme="light"] .topbar .nav-logout{ color:var(--lt-text-2)!important; }
html[data-theme="light"] .topbar .nav-logout:hover{ color:var(--lt-red)!important; }
html[data-theme="light"] .topbar .avatar-wrap{ background:var(--lt-surface-2)!important; border-color:var(--lt-border)!important; }
html[data-theme="light"] .topbar .acct-name{ color:var(--lt-text)!important; }
html[data-theme="light"] .topbar .acct-score{ color:var(--lt-gold)!important; }
html[data-theme="light"] .topbar .av-in{ background:var(--lt-surface-2)!important; color:var(--lt-purple)!important; }
html[data-theme="light"] .topbar .av-ring{ background:var(--lt-purple)!important; }   /* was a neon cyan→pink conic ring */
html[data-theme="light"] .nav-burger{ background:#f1e8fb!important; border:2px solid var(--lt-purple)!important; color:var(--lt-purple)!important; box-shadow:none!important; }
html[data-theme="light"] .nav-burger:active{ background:#e2d0f7!important; }

/* ── ☰ MENU ── */
html[data-theme="light"] .nav-menu{ background:var(--lt-surface)!important; border-color:var(--lt-border)!important; box-shadow:0 14px 40px rgba(40,20,80,0.18)!important; }
html[data-theme="light"] .nav-menu a{ color:var(--lt-text)!important; }
html[data-theme="light"] .nav-menu a:hover{ background:var(--lt-surface-2)!important; color:var(--lt-purple)!important; }
html[data-theme="light"] .nav-menu .nm-donate{ color:var(--lt-gold)!important; }
html[data-theme="light"] .nav-menu hr{ border-top-color:var(--lt-border)!important; }
html[data-theme="light"] .nav-menu .nm-name{ color:var(--lt-text)!important; }
html[data-theme="light"] .nav-menu .nm-score{ color:var(--lt-gold)!important; }
html[data-theme="light"] .nav-menu .nm-av{ background:var(--lt-surface-2)!important; color:var(--lt-purple)!important; }

/* ── FOOTER ── */
html[data-theme="light"] footer{ background:var(--lt-surface)!important; border-top:1px solid var(--lt-border)!important; }
html[data-theme="light"] footer .footer-tag,
html[data-theme="light"] footer .footer-copy{ color:var(--lt-text-2)!important; }
html[data-theme="light"] footer .footer-links a{ color:var(--lt-text-2)!important; }
html[data-theme="light"] footer a:hover,
html[data-theme="light"] footer .footer-links a:hover{ color:var(--lt-purple)!important; }
html[data-theme="light"] footer .footer-copy a{ color:var(--lt-purple)!important; }   /* beats the inline #aaaacc */

/* ── LOGIN / SIGN-UP MODAL ── */
html[data-theme="light"] .auth-overlay{ background:rgba(245,243,250,0.95)!important; }
/* shared.js scopes its OWN neon variables to #auth-overlay.auth-overlay, which beat the
   html-level remap above — labels, "Forgot password?" and the subtitle came out cyan or
   72%-white on the white box (1.0–1.4:1). Remap them on the overlay itself. */
html[data-theme="light"] #auth-overlay.auth-overlay{
  --text-primary:var(--lt-text); --text-dim:var(--lt-text-2); --dim:var(--lt-text-2);
  --neon-blue:var(--lt-purple); --neon-pink:var(--lt-pink); --neon-purple:var(--lt-purple-2);
}
/* was dark text on a cyan→purple gradient; with the purple remap that text would vanish */
html[data-theme="light"] #auth-overlay .form-submit{ background:var(--lt-purple)!important; color:#fff!important; box-shadow:none!important; }
html[data-theme="light"] #auth-overlay .pw-requirements{ background:var(--lt-surface-2)!important; border-color:var(--lt-border)!important; }
html[data-theme="light"] #auth-overlay .pw-req-item{ color:var(--lt-red)!important; }
html[data-theme="light"] .auth-box{ background:var(--lt-surface)!important; border-color:var(--lt-border)!important; box-shadow:0 20px 60px rgba(40,20,80,0.2)!important; }
html[data-theme="light"] .auth-box button[aria-label="Close"]{ color:var(--lt-text-2)!important; }
html[data-theme="light"] #social-login-section button{ background:var(--lt-surface)!important; border:1px solid var(--lt-border)!important; color:var(--lt-text)!important; }
html[data-theme="light"] .auth-msg.success{ color:var(--lt-green)!important; background:#e6f4ea!important; border-color:#9fd3b0!important; }
html[data-theme="light"] .auth-msg.error{ color:var(--lt-red)!important; background:#fce8e6!important; border-color:#f0b4ae!important; }
html[data-theme="light"] .pw-req-item.met,
html[data-theme="light"] .pw-req-item.met::before{ color:var(--lt-green)!important; }

/* ── FORM INPUTS (every page) — most were white text on a 4%-white fill ── */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea{
  background-color:var(--lt-surface)!important; color:var(--lt-text)!important; border-color:#b9acd3!important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus{ border-color:var(--lt-purple)!important; box-shadow:0 0 0 3px rgba(91,15,168,0.15)!important; }
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder{ color:var(--lt-muted)!important; opacity:1!important; }
html[data-theme="light"] select option{ background:var(--lt-surface)!important; color:var(--lt-text)!important; }

/* ── LIGHT / DARK PICKER (profile.html + register2.html) ── */
html[data-theme="light"] .theme-opt{ background:var(--lt-surface)!important; border-color:var(--lt-border)!important; color:var(--lt-text)!important; }
html[data-theme="light"] .theme-opt:hover{ border-color:var(--lt-purple-2)!important; }
html[data-theme="light"] .theme-opt[aria-checked="true"]{ border-color:var(--lt-purple)!important; box-shadow:0 0 0 3px rgba(91,15,168,0.2)!important; }
html[data-theme="light"] .theme-opt-desc,
html[data-theme="light"] .theme-note{ color:var(--lt-text-2)!important; }
