/* GEM — light/dark theme. Default (no class) = dark. html.theme-light flips the
   page CONTENT to a warm document palette; the nav, footer-CTA and footer stay
   dark chrome so the white logo never lands on a light bar. Loaded LAST. */

/* ---- Light palette: remap the core tokens ---------------------------------- */
html.theme-light {
  --onyx: #FAFAF8;          /* page background (clean near-white) */
  --onyx-deep: #FFFFFF;     /* alternate section background — clean white so gold reads */
  --charcoal: #FFFFFF;      /* card surface */
  --warm-white: #14130F;    /* primary text (near-black, warm) */
  --warm-gray: #6A685F;     /* secondary text */
  --stone: #3E3C36;         /* tertiary / strong body text */
  --midnight-navy: #ECE4D4; /* warm light for former navy feature bands */
  --slate: #D7D2C6;
  --ink: 20, 20, 18;        /* every rgba(var(--ink),x) flips to dark-alpha */
}

/* Gold CTA buttons always carry near-black text (gold is light-ish). */
html.theme-light .btn-primary { color: #14130F; }

/* Keep the TRUE chrome dark in light mode — nav + footer carry the white GEM
   logo — plus the slider ARTBOARD only (.shifts-stage), whose gold line-art
   needs a dark navy field. The structural-shifts section background, its
   heading, and the "Ready to invest" CTA band all go light with the page. */
html.theme-light .gem-nav,
html.theme-light .shifts-stage,
html.theme-light .gem-footer {
  --onyx: #0A0A0A;
  --onyx-deep: #050505;
  --charcoal: #1A1A1A;
  --warm-white: #FAFAF8;
  --warm-gray: #888780;
  --stone: #D3D1C7;
  --midnight-navy: #1B2A4A;
  --slate: #3A3A3A;
  --ink: 255, 255, 255;
}

/* Legal document pages: drive the priv-shell light variables from the theme. */
html.theme-light .priv-shell {
  --fg: #14130F;
  --muted: #4c4a44;
  --line: var(--stone);
  --surface: #FFFFFF;
  --surface-border: var(--stone);
  background: var(--onyx);
}

/* Map placeholder + headshot navy areas read fine either way; nudge the empty
   headshot placeholders to a soft parchment in light mode. */
html.theme-light .team-card.is-placeholder .team-portrait { background: #F0E9DC; }

/* Process & alternate bands now use the white --onyx-deep token directly. */
/* Risk feature band: lighten to clean tones in light mode so gold reads. */
html.theme-light .eq-risk { background: #FAFAF8; }
html.theme-light .eq-risk-factor { background: #FFFFFF; }

/* ---- Theme toggle button (fixed, bottom-left) ------------------------------ */
#gem-theme-toggle {
  position: fixed; left: 20px; bottom: 20px; z-index: 2000;
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 16px; cursor: pointer;
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 2.5px;
  text-transform: uppercase;
  background: rgba(20, 20, 20, 0.82);
  color: #BEA87D;
  border: 1px solid rgba(190, 168, 125, 0.32);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}
#gem-theme-toggle:hover { border-color: #BEA87D; }
html.theme-light #gem-theme-toggle {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(190, 168, 125, 0.5);
  color: #9a7f4e;
}
/* Half-filled diamond glyph — the only mode indicator (no icon library). */
#gem-theme-toggle .gem-theme-glyph {
  width: 13px; height: 13px; flex: none; position: relative;
  transform: rotate(45deg); border: 1px solid #BEA87D; overflow: hidden;
}
#gem-theme-toggle .gem-theme-glyph::after {
  content: ''; position: absolute; top: -1px; left: -1px; bottom: -1px; width: 50%;
  background: #BEA87D;
}
html.theme-light #gem-theme-toggle .gem-theme-glyph,
html.theme-light #gem-theme-toggle .gem-theme-glyph::after { border-color: #9a7f4e; background: #9a7f4e; }

@media (max-width: 640px) {
  #gem-theme-toggle { left: 12px; bottom: 12px; padding: 9px 12px; }
}