/* ============================================================================
   VisionBoard Finance — shared theme layer.

   Loaded AFTER style.css on the legacy pages (subscription, profile, admin,
   learn, community, options, portfolio, for-funds, legal). Those pages were
   built dark-only — style.css contains no prefers-color-scheme rule at all —
   so a reader who picked light mode on the dashboard hit a wall of dark on
   every other page.

   This re-points the legacy variable names at the current design values and
   adds the missing light theme, rather than rewriting nine pages by hand.
   Pages that hardcode a colour instead of using the variables will still show
   through; those are worth converting individually over time.
   ========================================================================= */

@font-face {
  font-family: "Figtree VBF";
  src: url(/assets/fonts/figtree-subset.woff2) format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader VBF";
  src: url(/assets/fonts/newsreader-subset.woff2) format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;

  /* surfaces — re-stepped so hierarchy reads; the originals sat inside a
     3-point band of near-black and melted together */
  --bg-primary:   #0a0a0f;
  --bg-secondary: #15151f;
  --bg-tertiary:  #20202c;
  --bg-card:      #15151f;
  --bg-glass:     rgba(21, 21, 31, .82);
  --bg-elevated:  #2b2b3a;
  --bg-hover:     rgba(102, 126, 234, .14);

  /* ink — --text-muted measured 3.86:1 on the card surface, under the WCAG
     AA floor, while carrying most of the small text on these pages */
  --text-primary:   #ffffff;
  --text-secondary: #a1a1aa;
  --text-muted:     #9494a0;
  --text-accent:    #a78bfa;
  --text-highlight: #f0f0f5;

  --border-color:  rgba(255, 255, 255, .11);
  --border-accent: rgba(102, 126, 234, .30);
  --border-glow:   rgba(102, 126, 234, .50);
  --border-subtle: rgba(255, 255, 255, .06);

  --font-sans: "Figtree VBF", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Newsreader VBF", Georgia, serif;
}

/* ---- light theme: follows the system unless the reader chose otherwise ---- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --bg-primary:   #F4F4F8;
    --bg-secondary: #FFFFFF;
    --bg-tertiary:  #ECECF3;
    --bg-card:      #FFFFFF;
    --bg-glass:     rgba(255, 255, 255, .85);
    --bg-elevated:  #E2E2EC;
    --bg-hover:     rgba(83, 70, 192, .10);

    --text-primary:   #12121a;
    --text-secondary: #4A4A57;
    --text-muted:     #5f5f68;
    --text-accent:    #6D4FD0;
    --text-highlight: #12121a;

    --border-color:  rgba(18, 18, 26, .10);
    --border-accent: rgba(83, 70, 192, .28);
    --border-glow:   rgba(83, 70, 192, .45);
    --border-subtle: rgba(18, 18, 26, .06);

    --accent-primary:   #5346C0;
    --accent-secondary: #6C3F97;
    --accent-tertiary:  #B5479E;
    --accent-glow:      rgba(83, 70, 192, .30);
    --primary-gradient: linear-gradient(135deg, #5346C0 0%, #6C3F97 50%, #B5479E 100%);

    /* status hues need their darker steps to hold up on a light ground */
    --expansion-color: #14804A;
    --boom-color:      #2E6DA8;
    --recession-color: #8A660F;
    --depression-color:#B03A6B;
    --success-color:   #14804A;
    --error-color:     #B03A6B;
    --warning-color:   #8A660F;
    --info-color:      #2E6DA8;
  }
}

/* explicit choice always wins, in both directions */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-primary:   #F4F4F8;
  --bg-secondary: #FFFFFF;
  --bg-tertiary:  #ECECF3;
  --bg-card:      #FFFFFF;
  --bg-glass:     rgba(255, 255, 255, .85);
  --bg-elevated:  #E2E2EC;
  --bg-hover:     rgba(83, 70, 192, .10);

  --text-primary:   #12121a;
  --text-secondary: #4A4A57;
  --text-muted:     #5f5f68;
  --text-accent:    #6D4FD0;
  --text-highlight: #12121a;

  --border-color:  rgba(18, 18, 26, .10);
  --border-accent: rgba(83, 70, 192, .28);
  --border-glow:   rgba(83, 70, 192, .45);
  --border-subtle: rgba(18, 18, 26, .06);

  --accent-primary:   #5346C0;
  --accent-secondary: #6C3F97;
  --accent-tertiary:  #B5479E;
  --accent-glow:      rgba(83, 70, 192, .30);
  --primary-gradient: linear-gradient(135deg, #5346C0 0%, #6C3F97 50%, #B5479E 100%);

  --expansion-color: #14804A;
  --boom-color:      #2E6DA8;
  --recession-color: #8A660F;
  --depression-color:#B03A6B;
  --success-color:   #14804A;
  --error-color:     #B03A6B;
  --warning-color:   #8A660F;
  --info-color:      #2E6DA8;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-primary:   #0a0a0f;
  --bg-secondary: #15151f;
  --bg-tertiary:  #20202c;
  --bg-card:      #15151f;
  --bg-glass:     rgba(21, 21, 31, .82);
  --bg-elevated:  #2b2b3a;
  --bg-hover:     rgba(102, 126, 234, .14);

  --text-primary:   #ffffff;
  --text-secondary: #a1a1aa;
  --text-muted:     #9494a0;
  --text-accent:    #a78bfa;
  --text-highlight: #f0f0f5;

  --border-color:  rgba(255, 255, 255, .11);
  --border-accent: rgba(102, 126, 234, .30);
  --border-glow:   rgba(102, 126, 234, .50);
  --border-subtle: rgba(255, 255, 255, .06);
}

/* ---- typography: adopt the site face without restructuring these pages ---- */
body,
button, input, select, textarea {
  font-family: var(--font-sans);
}
h1, h2, h3, h4 { letter-spacing: -.02em; }

/* the legacy pages set body colours directly in places; make sure the ground
   and ink always track the tokens so light mode cannot half-apply */
body { background: var(--bg-primary); color: var(--text-primary); }

/* ---- hardcoded-colour patches ----
   A handful of chrome elements in style.css bake their background in rather
   than using a token — the fixed nav bar most visibly, which stayed dark over
   a light page. These are the ones that appear on every page; anything deeper
   in a single page's layout is better fixed when that page is converted. */
.nav-bar {
  background: color-mix(in srgb, var(--bg-primary) 78%, transparent);
  border-bottom: 1px solid var(--border-color);
}
.nav-bar::after { opacity: .35; }

/* dropdowns, sheets and modals that shared the same baked-in dark */
.nav-dropdown, .dropdown-menu, .modal, .modal-content,
.mobile-menu, .mobile-nav, .sheet, .popover {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* the disclaimer overlay reads as a grey wash in light mode without this */
.modal-overlay, .overlay, .backdrop {
  background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
}