/* ============================================================
   W2G — SITE-WIDE THEME SYSTEM (warm editorial palette)
   ------------------------------------------------------------
   Promotes the accepted Guest Home "Editorial Competition Board"
   palette (see style-guest-home-redesign.css, the source of
   truth) from a guest-home-only layer to the shared design-token
   system used by the entire product.

   SAFETY / SCOPE
   • This file is PURELY a token re-declaration + a handful of
     narrowly-scoped shared-primitive fixes. It does not rename,
     remove, or restructure any selector, class, id, or JS hook.
   • It changes COLOR VALUES ONLY. No sizing, spacing, radius,
     shadow geometry, typography scale, or layout is touched.
   • Loaded LAST (after style-guest-home-redesign.css) so it wins
     the cascade on every selector it repeats verbatim from the
     files below, purely through source order at EQUAL
     specificity — no !important, no invented selectors.
   • Rollback: delete the one <link> to this file (and remove it
     from Prototype.html/Login.html/Onboarding.html) to fully
     revert to the previous cool palette. Nothing else changes.

   WHY THESE SELECTORS (traced during audit, see chat for detail)
   The app already routes almost all color through three
   cascading "sites" of the SAME `--w2g-*` custom-property names:
     Site A — global `:root` / `html[data-theme="dark"]` in
              style-polish-v3.css (~line 19958) — governs guest
              non-home pages, Login, Onboarding.
     Site C — `body.app-shell-v2` / `html[data-theme="dark"]
              body.app-shell-v2` in style-polish-v3.css
              (~line 30590) — a body-class override that already
              out-specifies Site A for the ENTIRE logged-in shell
              (Personal, Organizer, Admin, Mission Center all
              share this one shell — there are no separate
              per-role shell classes in this codebase).
   A third, older pre-token-system layer (style.css,
   style-redesign-v2.css) defines its own bare `--orange/--ink/
   --card/...` names with NO dark-mode values at all; components
   that still read those (mostly Auth) get retinted here too, and
   gain real dark-mode support as a side effect.
   Repeating the exact selectors above (not inventing new ones)
   is what lets this file stay additive and low-risk.
   ============================================================ */

/* ── SECTION 1 — Global tokens (Site A) + legacy pre-token
   names (style.css / style-redesign-v2.css), warm + complete
   dark values. Governs: guest #competitions/#teams/#members,
   Login, Onboarding, and anything not inside the logged-in shell. */
:root {
  /* -- approved neutral light foundation -- */
  --w2g-bg:          #FFFFFF;
  --w2g-surface:     #FFFFFF;
  --w2g-surface-2:   #F7F7F7;
  --w2g-surface-3:   #F2F3F4;
  --w2g-line:        #E5E7EB;
  --w2g-line-strong: #D1D5DB;

  --w2g-ink:    #18181B;
  --w2g-ink-2:  #18181B;
  --w2g-body:   #3F3F46;
  --w2g-muted:  #71717A;
  --w2g-faint:  #A1A1AA;

  /* -- brand orange (source: guest home light) -- */
  --w2g-orange:        #EA580C;
  --w2g-orange-strong: #C2410C;
  --w2g-orange-soft:   #FFF4ED;
  --w2g-orange-line:   #FED7AA;
  --w2g-orange-ink:    #C2410C;

  /* -- match/score spectrum: keep hue meaning, warm the neutrals -- */
  --w2g-match-strong:   #15A34A;
  --w2g-match-good:     #19A349;
  --w2g-match-fair:     #C98A12;
  --w2g-match-low:      #71717A;
  --w2g-match-track:    #E5E7EB;
  --w2g-match-soft:     #F0FDF4;
  --w2g-match-ink:      #15803D;
  --w2g-match-fair-ink: #92400E;

  /* -- status: stay semantically distinct, do not orange-wash -- */
  --w2g-success: #16A34A;
  --w2g-warning: #92400E;
  --w2g-danger:  #B91C1C;
  --w2g-info:    #2563EB;

  /* -- shadows / focus: warm-neutral tint instead of cool black -- */
  --w2g-shadow-sm:  0 1px 2px rgba(24, 24, 27, 0.06);
  --w2g-shadow-md:  0 2px 8px rgba(24, 24, 27, 0.08);
  --w2g-shadow-pop: 0 8px 24px rgba(24, 24, 27, 0.14);
  --w2g-focus:      0 0 0 3px rgba(234, 88, 12, 0.18);

  /* -- gap-fill semantic tokens (component-state categories the
     legacy system never named) -- */
  --w2g-overlay:          rgba(24, 24, 27, 0.5);
  --w2g-disabled-surface: #F2F3F4;
  --w2g-disabled-text:    #A1A1AA;
  --w2g-orange-contrast:  #FFFFFF;
  --w2g-link:             #C2410C;

  /* -- legacy pre-w2g tokens (style.css / style-redesign-v2.css):
     retinted so anything still reading the bare names (mostly
     Auth) matches the same warm identity -- */
  --orange:       #EA580C;
  --orange-dark:  #C2410C;
  --orange-light: #FFF4ED;
  --orange-soft:  #FFF4ED;
  --orange-soft-2:#FED7AA;
  --bg:           #FFFFFF;
  --canvas:       #FFFFFF;
  --card:         #FFFFFF;
  --surface:      #FFFFFF;
  --surface-2:    #F7F7F7;
  --surface-3:    #F2F3F4;
  --soft:         #F7F7F7;
  --ink:          #18181B;
  --ink-2:        #18181B;
  --body:         #3F3F46;
  --muted:        #71717A;
  --border:       #E5E7EB;
  --line:         #E5E7EB;
  --border-soft:  #E5E7EB;
  --border-orange:#FED7AA;
  --danger:       #B91C1C;
  --success:      #16A34A;
  --warning:      #92400E;
  --info:         #2563EB;
}

html[data-theme="dark"] {
  /* -- w2g surfaces / text / borders (source: guest home dark) -- */
  --w2g-bg:          #17130D;
  --w2g-surface:     #211A11;
  --w2g-surface-2:   #2B2217;
  --w2g-surface-3:   #34291B;
  --w2g-line:        #3B3021;
  --w2g-line-strong: #4A3D2A;

  --w2g-ink:    #F3E9D7;
  --w2g-ink-2:  #E4D6BC;
  --w2g-body:   #D9CDB6;
  --w2g-muted:  #B7A98C;
  --w2g-faint:  #8A7D64;

  --w2g-orange:        #F2790F;
  --w2g-orange-strong: #F0A868;
  --w2g-orange-soft:   rgba(234, 88, 12, 0.16);
  --w2g-orange-line:   rgba(234, 88, 12, 0.32);
  --w2g-orange-ink:    #F0A868;

  --w2g-match-strong:   #2BB35E;
  --w2g-match-good:     #33C26B;
  --w2g-match-fair:     #D6A22B;
  --w2g-match-low:      #8A7D64;
  --w2g-match-track:    rgba(243, 233, 215, 0.08);
  --w2g-match-soft:     rgba(43, 179, 94, 0.14);
  --w2g-match-ink:      #6FD79A;
  --w2g-match-fair-ink: #D6A22B;

  --w2g-success: #4C9E3C;
  --w2g-warning: #D6A22B;
  --w2g-danger:  #F26464;
  --w2g-info:    #5B93F5;

  --w2g-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.30);
  --w2g-shadow-md:  0 2px 10px rgba(0, 0, 0, 0.36);
  --w2g-shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.46);
  --w2g-focus:      0 0 0 3px rgba(242, 121, 15, 0.28);

  --w2g-overlay:          rgba(10, 8, 5, 0.6);
  --w2g-disabled-surface: #2B2217;
  --w2g-disabled-text:    #6B5F49;
  --w2g-orange-contrast:  #17130D;
  --w2g-link:             #F0A868;

  /* -- legacy pre-w2g tokens: previously had NO dark values at
     all (pre-existing gap) — this both warms them and gives
     Auth components real dark-mode support for the first time -- */
  --orange:       #F2790F;
  --orange-dark:  #F0A868;
  --orange-light: rgba(234, 88, 12, 0.16);
  --orange-soft:  rgba(234, 88, 12, 0.16);
  --orange-soft-2:rgba(234, 88, 12, 0.32);
  --bg:           #17130D;
  --canvas:       #17130D;
  --card:         #211A11;
  --soft:         #2B2217;
  --ink:          #F3E9D7;
  --ink-2:        #E4D6BC;
  --body:         #D9CDB6;
  --muted:        #B7A98C;
  --border:       #3B3021;
  --border-soft:  #34291B;
  --border-orange:rgba(234, 88, 12, 0.32);
  --danger:       #F26464;
  --success:      #4C9E3C;
  --warning:      #D6A22B;
  --info:         #5B93F5;
}

/* ── SECTION 2 — Authenticated shell (Site C). This body-class
   rule already out-specifies Site A's `:root` for every logged-in
   view (Personal, Organizer, Admin, Mission Center all share this
   one shell), so repeating it here — same selector, later in the
   cascade — is what actually retints the logged-in app. ── */
body.app-shell-v2 {
  --w2g-bg:          #FFFFFF;
  --w2g-surface:     #FFFFFF;
  --w2g-surface-2:   #F7F7F7;
  --w2g-surface-3:   #F2F3F4;
  --w2g-ink:         #18181B;
  --w2g-ink-2:       #18181B;
  --w2g-body:        #3F3F46;
  --w2g-muted:       #71717A;
  --w2g-faint:       #A1A1AA;
  --w2g-line:        #E5E7EB;
  --w2g-line-strong: #D1D5DB;
  --w2g-chip:        #F2F3F4;
  --w2g-chip-border: #E5E7EB;
  --w2g-orange:        #EA580C;
  --w2g-orange-strong: #C2410C;
  --w2g-orange-soft:   #FFF4ED;
  --w2g-orange-line:   #FED7AA;
  --w2g-orange-ink:    #C2410C;
  --w2g-green:      #16A34A;
  --w2g-green-deep: #15803D;
  --w2g-amber:      #92400E;
}

html[data-theme="dark"] body.app-shell-v2 {
  --w2g-bg:          #17130D;
  --w2g-surface:     #211A11;
  --w2g-ink:         #F3E9D7;
  --w2g-muted:       #B7A98C;
  --w2g-line:        #3B3021;
  --w2g-chip:        #2B2217;
  --w2g-chip-border: #3B3021;
  --w2g-orange:        #F2790F;
  --w2g-orange-soft:   rgba(234, 88, 12, 0.16);
  --w2g-orange-line:   rgba(234, 88, 12, 0.32);
  --w2g-green:      #4C9E3C;
  --w2g-green-deep: #3C8A2E;
  --w2g-amber:      #D6A22B;
}

/* ── SECTION 3 — Shared primitive fixes. These two rules are the
   only non-token-only changes in this file: `.modal-card` /
   `.modal-overlay` hardcode a literal white/near-black instead of
   reading any token, so every modal in the app (all roles) would
   otherwise stay a cold white/navy card floating on the new warm
   canvas. Narrow, single-purpose, and the selectors already exist
   verbatim in style-polish-v3.css (lines ~1350-1369). ── */
.modal-overlay {
  background: var(--w2g-overlay);
}
.modal-card {
  background: var(--w2g-surface);
}
html[data-theme="dark"] .modal-card {
  background: var(--w2g-surface);
}

/* ── SECTION 4 — Login dark-mode specificity bug. style-polish-v3.css
   has a "Design v2 — Auth Alignment" pass (~line 24968) whose comment
   says it "reuses the existing --w2g-* v2 tokens, so light + dark stay
   consistent" via `body[data-page="login"] .auth-info-panel { background:
   var(--w2g-surface) !important; ... }`. That is true in LIGHT mode, but
   in DARK mode it is silently beaten by an OLDER, higher-specificity
   block (~line 24844, `html[data-theme="dark"] body[data-page="login"]
   .auth-info-panel { background:#14171E !important; ... }`) that
   hardcodes the pre-warm cool-dark palette and was never cleaned up.
   Verified via computed-style probe: Login's dark auth-info-panel
   resolved to rgb(20,23,30) (#14171E, the OLD cool value) even after
   Section 1's --w2g-surface dark value was warmed. Repeating the exact
   higher-specificity selectors here (same selector = same specificity,
   this file loads last) is the minimal fix — it restores the tokens the
   v2-alignment comment already intended to use, in dark mode too. ── */
html[data-theme="dark"] body[data-page="login"].auth-page {
  background: var(--w2g-bg) !important;
  color: var(--w2g-ink);
}
html[data-theme="dark"] body[data-page="login"] .auth-info-panel {
  border-right-color: var(--w2g-line) !important;
  background: var(--w2g-surface) !important;
  color: var(--w2g-ink);
}
html[data-theme="dark"] body[data-page="login"] .auth-info-panel::after {
  background: radial-gradient(circle, var(--w2g-orange-soft), transparent 70%);
}
html[data-theme="dark"] body[data-page="login"] .auth-form-panel {
  background: var(--w2g-bg) !important;
}
html[data-theme="dark"] body[data-page="login"] .auth-brand,
html[data-theme="dark"] body[data-page="login"] .auth-brand.light,
html[data-theme="dark"] body[data-page="login"] .auth-brand strong,
html[data-theme="dark"] body[data-page="login"] .auth-hero-copy h1,
html[data-theme="dark"] body[data-page="login"] .auth-card-heading h2 {
  color: var(--w2g-ink);
}
html[data-theme="dark"] body[data-page="login"] .auth-brand small,
html[data-theme="dark"] body[data-page="login"] .auth-footer-copy,
html[data-theme="dark"] body[data-page="login"] .auth-card-heading p:last-child {
  color: var(--w2g-muted) !important;
}
html[data-theme="dark"] body[data-page="login"] .auth-hero-copy p:not(.eyebrow),
html[data-theme="dark"] body[data-page="login"] .auth-role-note span,
html[data-theme="dark"] body[data-page="login"] .auth-note-grid div span {
  color: var(--w2g-body) !important;
  -webkit-text-fill-color: var(--w2g-body) !important;
}
html[data-theme="dark"] body[data-page="login"] .auth-role-note strong,
html[data-theme="dark"] body[data-page="login"] .auth-note-grid div strong {
  color: var(--w2g-ink-2) !important;
  -webkit-text-fill-color: var(--w2g-ink-2) !important;
}
html[data-theme="dark"] body[data-page="login"] .auth-role-note::before,
html[data-theme="dark"] body[data-page="login"] .auth-note-grid div::before {
  border-color: var(--w2g-orange-line);
  background: var(--w2g-orange-soft);
  box-shadow: inset 0 0 0 4px var(--w2g-surface);
}
html[data-theme="dark"] body[data-page="login"] .language-switch,
html[data-theme="dark"] body[data-page="login"] .theme-toggle,
html[data-theme="dark"] body[data-page="login"] .auth-card-redesign input,
html[data-theme="dark"] body[data-page="login"] .role-grid button {
  border-color: var(--w2g-line-strong) !important;
  background: var(--w2g-surface) !important;
  color: var(--w2g-ink-2);
}
/* Form-card WRAPPER (see chat, Login theme-completion pass): kept its own
   --w2g-surface fill above (same rule as inputs/chips), which reads as a
   visibly lighter rectangle pasted over the --w2g-bg auth-form-panel
   behind it (confirmed by computed style: card #211A11 vs panel #17130D).
   The brief wants the wrapper transparent/near-invisible so the page
   canvas stays the dominant surface — inputs/button/labels still read as
   distinct fields because THEY keep their own surface fill, border, and
   focus states; only the outer card no longer double-boxes them. */
html[data-theme="dark"] body[data-page="login"] .form-card.auth-card-redesign {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--w2g-ink-2);
}
html[data-theme="dark"] body[data-page="login"] .auth-tabs,
html[data-theme="dark"] body[data-page="login"] .auth-role-select {
  border-color: var(--w2g-line) !important;
  background: var(--w2g-surface-2) !important;
}
html[data-theme="dark"] body[data-page="login"] .auth-tabs button.active {
  background: var(--w2g-surface) !important;
  color: var(--w2g-ink) !important;
  -webkit-text-fill-color: var(--w2g-ink) !important;
}
html[data-theme="dark"] body[data-page="login"] .auth-tabs button:not(.active),
html[data-theme="dark"] body[data-page="login"] .auth-card-redesign label span {
  color: var(--w2g-body) !important;
  -webkit-text-fill-color: var(--w2g-body) !important;
}
html[data-theme="dark"] body[data-page="login"] .quick-access-notice,
html[data-theme="dark"] body[data-page="login"] #authMessage.message.info,
html[data-theme="dark"] body[data-page="login"] #authMessage.message.info.hidden,
html[data-theme="dark"] body[data-page="login"] .role-grid button.active {
  border-color: var(--w2g-orange-line) !important;
  background: var(--w2g-orange-soft) !important;
  color: var(--w2g-orange-strong) !important;
}

/* ── SECTION 5 — Auth marketing-panel light-mode text. These four
   selectors (style-auth-final.css ~line 417-499) hardcode cool
   slate/navy literals unconditionally for light theme (the dark-theme
   siblings already use neutral white and read fine on any warm/cool
   background, so those are left alone). ── */
html[data-theme="light"] .auth-redesign .auth-value-headline {
  color: var(--w2g-ink);
}
html[data-theme="light"] .auth-redesign .auth-value-icon {
  color: var(--w2g-muted);
}
html[data-theme="light"] .auth-redesign .auth-value-item strong {
  color: var(--w2g-ink);
}
html[data-theme="light"] .auth-redesign .auth-value-item > div > span {
  color: var(--w2g-muted);
}

/* ── SECTION 6 — Member Profile modal (mpv3) + Team Profile modal
   (teamv3). Two more fully self-contained local token systems,
   entirely disconnected from --w2g-*, found via the literal "#14171e"
   fallback search (style-polish-v3.css ~42653 and ~45111). Repeating
   their exact selectors with warm-mapped values, same structure
   (default block = dark design; light theme overridden explicitly). ── */
body[data-page="app"] #modalOverlay.member-profile-modal-v3:not(.hidden) {
  --mpv3-bg: #120F09;
  --mpv3-surface: #17130D;
  --mpv3-panel: #1C160E;
  --mpv3-card: #2B2217;
  --mpv3-card-deep: #241C12;
  --mpv3-line: rgba(243, 233, 215, 0.10);
  --mpv3-line-strong: rgba(243, 233, 215, 0.15);
  --mpv3-ink: #F3E9D7;
  --mpv3-muted: #B7A98C;
  --mpv3-faint: #8A7D64;
  --mpv3-orange: #F2790F;
  --mpv3-orange-soft: rgba(234, 88, 12, 0.16);
}
html[data-theme="light"] body[data-page="app"] #modalOverlay.member-profile-modal-v3:not(.hidden) {
  --mpv3-bg: #FFFFFF;
  --mpv3-surface: #FFFFFF;
  --mpv3-panel: #FFFFFF;
  --mpv3-card: #F7F7F7;
  --mpv3-card-deep: #FFFFFF;
  --mpv3-line: rgba(24, 24, 27, 0.10);
  --mpv3-line-strong: rgba(24, 24, 27, 0.16);
  --mpv3-ink: #18181B;
  --mpv3-muted: #71717A;
  --mpv3-faint: #A1A1AA;
  --mpv3-orange: #EA580C;
  --mpv3-orange-soft: rgba(234, 88, 12, 0.10);
}
body[data-page="app"] #modalOverlay.team-profile-modal-v3:not(.hidden) {
  --teamv3-surface: #17130D;
  --teamv3-panel: #1C160E;
  --teamv3-card: #2B2217;
  --teamv3-line: rgba(243, 233, 215, 0.10);
  --teamv3-line-strong: rgba(243, 233, 215, 0.15);
  --teamv3-ink: #F3E9D7;
  --teamv3-muted: #B7A98C;
  --teamv3-faint: #8A7D64;
  --teamv3-orange: #F2790F;
  --teamv3-orange-soft: rgba(234, 88, 12, 0.16);
  background: rgba(23, 19, 13, 0.82) !important;
}
html[data-theme="light"] body[data-page="app"] #modalOverlay.team-profile-modal-v3:not(.hidden) {
  --teamv3-surface: #FFFFFF;
  --teamv3-panel: #F7F7F7;
  --teamv3-card: #FFFFFF;
  --teamv3-line: rgba(24, 24, 27, 0.10);
  --teamv3-line-strong: rgba(24, 24, 27, 0.16);
  --teamv3-ink: #18181B;
  --teamv3-muted: #71717A;
  --teamv3-faint: #A1A1AA;
  --teamv3-orange: #EA580C;
  --teamv3-orange-soft: rgba(234, 88, 12, 0.10);
  background: rgba(24, 24, 27, 0.38) !important;
}

/* ── SECTION 7 — Onboarding page (theme-completion pass, requested
   separately). `body.onboarding-page` has its own self-contained local
   token system ("W2G92 -- Claude reference onboarding shell",
   style-polish-v3.css ~line 39153 dark-default / ~line 40199 light)
   defining --ob-page/--ob-shell/--ob-elevated/--ob-input/--ob-border/
   --ob-border-strong/--ob-text/--ob-muted/--ob-soft/--ob-orange — never
   connected to --w2g-*, so the outer canvas + topbar stayed cool
   charcoal/navy even after Sections 1-6 warmed everything else. (The
   onboarding CARD itself was already warm — a separate, higher-
   specificity rule at style-polish-v3.css ~line 23137 already forces
   `.form-card.wide` to `var(--w2g-surface) !important` in dark mode —
   which is exactly why only the canvas/topbar/inputs looked mismatched
   against an already-warm card, not the card itself.) Connecting the
   --ob-* variables to --w2g-* is the "token exists but isn't connected"
   case the brief calls out, so this is the minimal fix: repeat the
   exact selectors, no new classes, no layout/JS/route changes. */
body.onboarding-page {
  --ob-page: var(--w2g-bg);
  --ob-shell: var(--w2g-surface);
  --ob-elevated: var(--w2g-surface-2);
  --ob-input: var(--w2g-surface);
  --ob-border: var(--w2g-line);
  --ob-border-strong: var(--w2g-line-strong);
  --ob-text: var(--w2g-ink);
  --ob-muted: var(--w2g-muted);
  --ob-soft: var(--w2g-body);
  --ob-orange: var(--w2g-orange);
}
html[data-theme="dark"] body.onboarding-page,
html[data-theme="light"] body.onboarding-page {
  --ob-page: var(--w2g-bg);
  --ob-shell: var(--w2g-surface);
  --ob-elevated: var(--w2g-surface-2);
  --ob-input: var(--w2g-surface);
  --ob-border: var(--w2g-line);
  --ob-border-strong: var(--w2g-line-strong);
  --ob-text: var(--w2g-ink);
  --ob-muted: var(--w2g-muted);
  --ob-soft: var(--w2g-body);
}

/* Outer page gradient: the theme-agnostic default rule (style-polish-v3.css
   ~line 22507) already reads var(--w2g-bg)/var(--w2g-surface-2), but its
   dark override (~line 23127) hardcodes a cool navy gradient
   (#0f172a/#111827) that wins in dark mode. Same selector, token gradient
   restored, orange glow re-matched to the warm brand orange. */
html[data-theme="dark"] body.onboarding-page {
  background:
    radial-gradient(circle at 12% 0%, rgba(234, 88, 12, 0.12), transparent 26%),
    linear-gradient(180deg, var(--w2g-bg) 0%, var(--w2g-surface-2) 100%) !important;
}

/* Topbar: two bugs stacked here.
   1) style-polish-v3.css:1875 `.simple-header { background: var(--polish-glass-bg); }`
      is beaten anyway by :20222 `.simple-header, .main-nav.open, .auth-actions.open
      { background: var(--polish-glass-bg) !important; }` (shared with the main app
      topbar and auth-actions dropdown — NOT touched here, out of scope).
   2) `--polish-glass-bg` itself (style-polish-v3.css ~line 20027/20093) is a
      hardcoded literal never connected to --w2g-* (light rgba(255,255,255,.92),
      dark rgba(20,23,30,.94) — confirmed by computed-style probe, matches
      exactly what rendered). Retinting `--polish-glass-bg` globally would also
      restyle `.main-nav.open`/`.auth-actions.open` on every other page, which is
      out of scope, so instead this uses a MORE SPECIFIC selector
      (body.onboarding-page ancestor) with matching !important — it only ever
      matches the onboarding header, `.main-nav`/`.auth-actions` are untouched. */
body.onboarding-page .simple-header {
  background: rgba(23, 19, 13, 0.94) !important;
}
html[data-theme="light"] body.onboarding-page .simple-header {
  background: rgba(255, 253, 248, 0.94) !important;
}

/* Language toggle: style-polish-v3.css:9799-9806 hardcodes a cool navy pill
   (`html[data-theme="dark"] .language-switch { background: rgba(15, 23, 42,
   0.84) !important; ...}`) — global, used by every page's language switch.
   Confirmed via computed style: onboarding's toggle rendered exactly that
   navy value in dark mode. Same reasoning as the topbar above: retinting the
   global rule would also touch Guest/Personal/Organizer/Admin's language
   switch, which is out of scope for this Onboarding-only pass, so this adds
   a more specific `body.onboarding-page` selector instead, matching only
   here. (The same cool-navy bug likely also affects the language switch on
   other pages in dark mode — flagged in the report as a residual, out of
   scope item, not fixed by this change.) */
html[data-theme="dark"] body.onboarding-page .language-switch {
  background: var(--w2g-surface) !important;
  border-color: var(--w2g-line-strong) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body.onboarding-page .language-switch button {
  background: transparent !important;
  color: var(--w2g-muted) !important;
}
html[data-theme="dark"] body.onboarding-page .language-switch button.active {
  background: linear-gradient(135deg, #ff7a2f 0%, #ff5f1a 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(234, 88, 12, 0.32) !important;
}

/* Step-number chip: unconditional dark literal + separate light literal. */
body.onboarding-page .ob-step-marker {
  background: #241C12;
}
html[data-theme="light"] body.onboarding-page .ob-step-marker {
  background: #FFF4ED;
}

/* Inputs/selects/triggers: dark hardcodes a cool literal (#14171d)
   instead of reading --ob-input; light hardcodes stark #ffffff instead
   of the warm paper surface the brief asks for ("no stark pure-white
   SaaS appearance"). Exact selectors + !important repeated from
   style-polish-v3.css ~line 39516-39529 (dark) and ~line 40308-40320
   (light) so this wins over both. */
body.onboarding-page #onboardingForm input,
body.onboarding-page #onboardingForm select,
body.onboarding-page #onboardingForm textarea,
body.onboarding-page .province-combobox-control,
body.onboarding-page .university-select-trigger,
body.onboarding-page .custom-commit-trigger,
body.onboarding-page .sl-search-input {
  background: var(--w2g-surface) !important;
}
html[data-theme="light"] body.onboarding-page #onboardingForm input,
html[data-theme="light"] body.onboarding-page #onboardingForm select,
html[data-theme="light"] body.onboarding-page #onboardingForm textarea,
html[data-theme="light"] body.onboarding-page .province-combobox-control,
html[data-theme="light"] body.onboarding-page .university-select-trigger,
html[data-theme="light"] body.onboarding-page .multi-select-trigger,
html[data-theme="light"] body.onboarding-page .multi-select-search,
html[data-theme="light"] body.onboarding-page .custom-commit-trigger,
html[data-theme="light"] body.onboarding-page .sl-search-input {
  background: var(--w2g-surface) !important;
}

/* Field-group surfaces + upload panel (light only — dark already uses a
   near-transparent white overlay, not a stark fill). Selectors repeated
   from style-polish-v3.css ~line 40294-40306. */
html[data-theme="light"] body.onboarding-page #onboardingForm label,
html[data-theme="light"] body.onboarding-page .multi-select-field,
html[data-theme="light"] body.onboarding-page .university-picker-card,
html[data-theme="light"] body.onboarding-page .skill-level-board,
html[data-theme="light"] body.onboarding-page .onboarding-more-options,
html[data-theme="light"] body.onboarding-page .sl-page-header,
html[data-theme="light"] body.onboarding-page .sl-cat,
html[data-theme="light"] body.onboarding-page .sl-row,
html[data-theme="light"] body.onboarding-page .custom-commit-field,
html[data-theme="light"] body.onboarding-page .ob-profile-photo-upload {
  background: var(--w2g-surface) !important;
}
html[data-theme="light"] body.onboarding-page #onboardingForm {
  background: var(--w2g-surface);
}

/* Dropdown menus + options (light). Selectors repeated from
   style-polish-v3.css ~line 40329-40347. */
html[data-theme="light"] body.onboarding-page #onboardingForm .province-combobox-menu,
html[data-theme="light"] body.onboarding-page #onboardingForm .university-select-menu,
html[data-theme="light"] body.onboarding-page .multi-select-menu,
html[data-theme="light"] body.onboarding-page .custom-commit-menu {
  background: var(--w2g-surface) !important;
}
html[data-theme="light"] body.onboarding-page #onboardingForm .university-menu-head,
html[data-theme="light"] body.onboarding-page #onboardingForm .university-option-list,
html[data-theme="light"] body.onboarding-page #onboardingForm .province-combobox-option,
html[data-theme="light"] body.onboarding-page #onboardingForm .university-option,
html[data-theme="light"] body.onboarding-page .multi-select-option,
html[data-theme="light"] body.onboarding-page .custom-commit-option {
  background: var(--w2g-surface) !important;
}
html[data-theme="light"] body.onboarding-page #onboardingForm select option {
  background: var(--w2g-surface);
}

/* Inactive choice/skill/availability chips (light). Selector repeated
   from style-polish-v3.css ~line 40367-40374 (active/selected state is
   already orange-tinted and untouched). */
html[data-theme="light"] body.onboarding-page .choice-button,
html[data-theme="light"] body.onboarding-page .skill-level-choice,
html[data-theme="light"] body.onboarding-page .availability-chip,
html[data-theme="light"] body.onboarding-page .sl-lvl-btn {
  background: var(--w2g-surface);
}

/* ── SECTION 8 — Login form theme-completion pass (requested
   separately). Root causes found:
   1) style-polish-v3.css ~line 12706 ("W2G69.2 — iOS Safari login input
      contrast hotfix") is an UNCONDITIONED, `!important` rule:
      `body[data-page="login"] input, ...[type="email"], ...[type="password"],
      ...[type="text"] { background-color: #ffffff !important; color:
      #0f172a !important; }`. A LATER, higher-specificity dark-mode rule
      (style-polish-v3.css ~12744, and this file's own Section 4) already
      beats it in dark mode — but nothing in the codebase ever added the
      matching LIGHT-mode override, so light mode was left on the hotfix's
      literal `#ffffff`, i.e. a stark-white input with no warm surface.
      That is the real cause of the input styling problems in this pass
      (not a separate "navy fill" — the navy specifically only appears
      through Chrome's native autofill, fixed in #2 below).
   2) Autofill: the existing `:-webkit-autofill` flood-fill trick
      (style-polish-v3.css ~12725 light, ~12765 dark) hardcodes the
      flood color as `#ffffff` (light) / `#0f172a` (dark, cool navy) —
      neither is connected to the warm tokens, so an autofilled/saved
      credential input renders navy in dark mode and stark white in
      light mode regardless of the fixes above. */
html[data-theme="light"] body[data-page="login"] input {
  background-color: var(--w2g-surface) !important;
  color: var(--w2g-ink) !important;
  -webkit-text-fill-color: var(--w2g-ink) !important;
  caret-color: var(--w2g-orange) !important;
  border-color: var(--w2g-line) !important;
}
html[data-theme="light"] body[data-page="login"] input::placeholder {
  color: var(--w2g-muted) !important;
  -webkit-text-fill-color: var(--w2g-muted) !important;
}

/* Autofill / saved-credential flood color, both themes — same selector
   list as style-polish-v3.css's existing light+dark autofill rules, so
   this wins by load order (this file loads last) without needing to
   out-specify anything. */
body[data-page="login"] input:-webkit-autofill,
body[data-page="login"] input:-webkit-autofill:hover,
body[data-page="login"] input:-webkit-autofill:focus,
body[data-page="login"] input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--w2g-ink) !important;
  caret-color: var(--w2g-orange) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--w2g-surface) inset !important;
  box-shadow: 0 0 0 1000px var(--w2g-surface) inset !important;
  transition: background-color 9999s ease-out 0s !important;
}
html[data-theme="dark"] body[data-page="login"] input:-webkit-autofill,
html[data-theme="dark"] body[data-page="login"] input:-webkit-autofill:hover,
html[data-theme="dark"] body[data-page="login"] input:-webkit-autofill:focus,
html[data-theme="dark"] body[data-page="login"] input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--w2g-ink) !important;
  caret-color: var(--w2g-orange) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--w2g-surface) inset !important;
  box-shadow: 0 0 0 1000px var(--w2g-surface) inset !important;
  transition: background-color 9999s ease-out 0s !important;
}

/* Remember Me label: the only remaining cool-toned piece (checkbox
   accent-color/focus ring in style-auth-final.css are already warm
   orange). */
html[data-theme="light"] .auth-redesign .auth-remember-label {
  color: var(--w2g-muted);
}

/* Dark-mode input text color: Section 4's shared rule (line ~312) sets
   `color: var(--w2g-ink-2)` without `!important`, which loses to
   style-polish-v3.css's own dark hotfix (~line 12744, `color: #f8fafc
   !important`, a cool pale color) at equal selector specificity —
   confirmed by computed style. Narrow, input-only fix with matching
   `!important` so the entered text is warm ivory instead. */
html[data-theme="dark"] body[data-page="login"] .auth-card-redesign input {
  color: var(--w2g-ink-2) !important;
  -webkit-text-fill-color: var(--w2g-ink-2) !important;
}

/* Mobile/tablet light-mode canvas + card: two separate breakpoint
   blocks in style-polish-v3.css (`@media (max-width: 720px)` ~line
   16260, and `@media (min-width: 721px) and (max-width: 1024px)`
   ~line 16399) hardcode `html[data-theme="light"] body[data-page=
   "login"].auth-page { background: #F2F4F8 !important; }` (a cool
   pale gray) and re-introduce a stark-white, heavy-shadow form-card
   at those two widths specifically — confirmed by computed style at
   375px and 900px (both showed rgb(241,243,247), i.e. #F2F4F8). My
   desktop-scoped Section 4 fix never covered these because it targeted
   dark mode only; light mode had no equivalent fix, so it was still
   the raw `#F2F4F8`/`#FFFFFF`. These two selectors (repeated verbatim,
   without the `@media` wrapper) are identical specificity to both
   breakpoint blocks, so — loading last — this wins regardless of
   which one currently matches. Dark mode's own body-background fix
   already exists (Section 4) and was confirmed correct at both widths,
   so it is not duplicated here. */
html[data-theme="light"] body[data-page="login"].auth-page {
  background: var(--w2g-bg) !important;
}
html[data-theme="light"] body[data-page="login"] .form-card.auth-card-redesign {
  background: transparent !important;
  border-color: var(--w2g-line) !important;
  box-shadow: none !important;
}

/* ── SECTION 9 — Approved Light Color System rollout.
   Shared primitives only; route-local systems map to these roles in their
   owning stylesheets. Dark-theme selectors above remain unchanged. */
html[data-theme="light"] body {
  background-color: #FFFFFF !important;
  color: #18181B;
}

html[data-theme="light"] body[data-page="app"] > .topbar,
html[data-theme="light"] body[data-page="app"] > .topbar.is-scrolled,
html[data-theme="light"] body.onboarding-page .simple-header,
html[data-theme="light"] body[data-page="login"] .auth-header {
  border-color: #E5E7EB !important;
  background: #FFFFFF !important;
  color: #18181B !important;
  box-shadow: 0 1px 0 rgba(24, 24, 27, 0.06) !important;
}

html[data-theme="light"] body[data-page="app"] > .topbar .brand,
html[data-theme="light"] body[data-page="app"] > .topbar .brand strong,
html[data-theme="light"] body[data-page="app"] > .topbar .main-nav button,
html[data-theme="light"] body[data-page="app"] > .topbar .shell-nav-item,
html[data-theme="light"] body[data-page="app"] > .topbar .notification-button,
html[data-theme="light"] body[data-page="app"] > .topbar .theme-toggle {
  color: #3F3F46 !important;
}

html[data-theme="light"] body[data-page="app"] > .topbar .brand strong {
  color: #EA580C !important;
}

/* Compact header labels need primary neutral contrast at their existing size.
   The double exclusion keeps selected navigation on its orange treatment. */
html[data-theme="light"] body[data-page="app"] > .topbar .main-nav .shell-nav-item:not(.active):not([aria-current="page"]) {
  color: #18181B !important;
}

html[data-theme="light"] .brand-mark,
html[data-theme="light"] body[data-page="login"] .auth-brand-mark {
  background-color: #EA580C !important;
  color: #18181B !important;
}

html[data-theme="light"] body[data-page="app"] > .topbar .main-nav button:hover,
html[data-theme="light"] body[data-page="app"] > .topbar .shell-nav-item:hover,
html[data-theme="light"] body[data-page="app"] > .topbar .shell-nav-item:focus-visible {
  border-color: #D1D5DB !important;
  background: #F7F7F7 !important;
  color: #18181B !important;
}

html[data-theme="light"] body[data-page="app"] > .topbar .main-nav button.active,
html[data-theme="light"] body[data-page="app"] > .topbar .shell-nav-item.active,
html[data-theme="light"] body[data-page="app"] > .topbar .shell-nav-item[aria-current="page"] {
  border-color: #FED7AA !important;
  background: #FFF4ED !important;
  color: #C2410C !important;
}

html[data-theme="light"] .button.primary,
html[data-theme="light"] button.button.primary,
html[data-theme="light"] a.button.primary {
  border-color: #C2410C !important;
  background: #C2410C !important;
  color: #FFFFFF !important;
}

html[data-theme="light"] .button.primary:hover,
html[data-theme="light"] button.button.primary:hover,
html[data-theme="light"] a.button.primary:hover {
  border-color: #9A3412 !important;
  background: #9A3412 !important;
  color: #FFFFFF !important;
}

html[data-theme="light"] .button.secondary,
html[data-theme="light"] .button.ghost,
html[data-theme="light"] .button.outline {
  border-color: #E5E7EB;
  background: #FFFFFF;
  color: #3F3F46;
}

html[data-theme="light"] .button.secondary:hover,
html[data-theme="light"] .button.ghost:hover,
html[data-theme="light"] .button.outline:hover {
  border-color: #D1D5DB;
  background: #F7F7F7;
  color: #18181B;
}

html[data-theme="light"] .count-badge {
  background-color: #C2410C;
  color: #FFFFFF;
}

html[data-theme="light"] .filter-toggle.active {
  border-color: #FED7AA;
  background-color: #FFF4ED;
  color: #C2410C;
}

html[data-theme="light"] :is(input, select, textarea) {
  border-color: #E5E7EB;
  background-color: #FFFFFF;
  color: #18181B;
}

html[data-theme="light"] :is(input, textarea)::placeholder {
  color: #71717A;
}

html[data-theme="light"] :is(input, select, textarea):disabled {
  border-color: #E5E7EB;
  background-color: #F2F3F4;
  color: #A1A1AA;
}

html[data-theme="light"] :is(input, select, textarea, button, a):focus-visible {
  outline-color: #EA580C;
}

html[data-theme="light"] .modal-overlay {
  background: rgba(24, 24, 27, 0.50);
}

html[data-theme="light"] .modal-card,
html[data-theme="light"] .popover,
html[data-theme="light"] .dropdown-menu {
  border-color: #E5E7EB;
  background: #FFFFFF;
  color: #18181B;
}

html[data-theme="light"] #modalOverlay[data-modal-kind="notifications"] .notification-v2-row {
  border-color: #E5E7EB;
  background: #FFFFFF;
}

html[data-theme="light"] #modalOverlay[data-modal-kind="notifications"] .notification-v2-row.is-unread {
  border-color: #D1D5DB;
  background: #F7F7F7;
}

html[data-theme="light"] #modalOverlay[data-modal-kind="notifications"] .notification-v2-row.notif-clickable:hover,
html[data-theme="light"] #modalOverlay[data-modal-kind="notifications"] .notification-v2-row.notif-clickable:focus-visible {
  border-color: #D1D5DB;
  background: #F2F3F4;
}