/* ═══════════════════════════════════════════════════════════════════════════
   Investment CMS — Theme System
   ───────────────────────────────────────────────────────────────────────────
   One shared layer for all 85 pages: six themes, a glass + emboss surface
   language, and responsive normalization.

   WHY THIS FILE EXISTS
   60 pages inline their own `:root` dark tokens, so themes were duplicated 60
   times and could not be changed centrally. Every rule here is scoped with
   `:root[data-theme="…"]` (specificity 0,2,0), which outranks a page's inline
   `:root` block (0,1,0) regardless of source order. So one file re-themes the
   whole product without editing a single page's token block.

   NO EXTERNAL FONTS. The CSP forbids them and G9F deliberately removed every
   Google Fonts reference. Typographic personality comes from the scale and the
   numeric treatment, not from a downloaded family.

   Load order: after each page's inline <style>, alongside theme-light.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Brand constants ─────────────────────────────────────────────────────
   The emerald/forest ramp is the one thing that does NOT change per theme.
   Surfaces shift; the brand does not. */
:root {
  --brand-900: #0B3B2E; --brand-800: #0F4A39; --brand-700: #136A4E;
  --brand-600: #178A63; --brand-500: #1DA97A; --brand-400: #41C494;
  --brand-300: #7FD9B6; --brand-200: #B8ECD7; --brand-100: #E4F7EF;

  /* Money semantics. Gold is positive-value emphasis only; red is loss only. */
  --gain: #16A34A; --loss: #DC2626; --gold: #B08420;

  /* Fluid type scale. clamp() means headers and footers scale continuously
     instead of jumping at breakpoints — this is what fixes the reported
     header/footer sizing, and it works on the 14 pages that have no media
     queries at all. */
  --fs-micro: clamp(10px, 0.68rem + 0.1vw, 11.5px);
  --fs-cap:   clamp(11px, 0.72rem + 0.12vw, 12.5px);
  --fs-body:  clamp(13px, 0.82rem + 0.14vw, 15px);
  --fs-lead:  clamp(15px, 0.92rem + 0.2vw, 17px);
  --fs-h3:    clamp(16px, 0.95rem + 0.35vw, 20px);
  --fs-h2:    clamp(19px, 1.05rem + 0.7vw, 26px);
  --fs-h1:    clamp(23px, 1.2rem + 1.2vw, 34px);
  /* The balance figure. Deliberately its own step — it is the single most
     looked-at number in the product. */
  --fs-figure: clamp(30px, 1.6rem + 3.2vw, 56px);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px;
  --tap: 44px;                        /* minimum touch target */
}

/* ── 2. The six themes ──────────────────────────────────────────────────────
   Each defines the same contract: three surface depths, three text weights, a
   line colour, an accent, and the glass/emboss variables the surface language
   below consumes. Adding a seventh theme means adding one block here. */

/* 2.1 LIGHT — warm paper. Default. */
:root[data-theme="light"] {
  --color-BasicBg: #FBFAF7; --color-SecondaryBg: #FFFFFF; --color-CardBg: #FFFFFF;
  --color-Vessel: #F2F0EA; --color-Line: #E4E0D7; --color-Input: #F6F4EF;
  --color-PrimaryText: #14201C; --color-SecondaryText: #46544E; --color-TertiaryText: #6B7770;
  --color-HoverBg: #F2F0EA;
  --ic-accent: var(--brand-600); --ic-accent-hover: var(--brand-700);
  /* Filled-button pair. --ic-accent alone is tuned for text and borders, where it sits on the
     page background; as a BUTTON fill it has to carry its own label, and brand-600 against
     white is only 4.2:1. These two are picked together so every theme clears 4.5:1. */
  --ic-accent-solid: var(--brand-700); --ic-on-accent: #FFFFFF;
  --color-Buy: var(--gain); --color-Sell: var(--loss);
  --glass-fill: rgba(255,255,255,.72); --glass-fill-2: rgba(255,255,255,.58);
  --glass-stroke: rgba(20,32,28,.10); --glass-stroke-2: rgba(20,32,28,.16);
  --glass-blur: blur(18px) saturate(150%);
  /* Emboss: light catches the top edge, shade collects at the bottom. 1px
     each — a machined panel, not a 2010 bevel. */
  --emb-high: inset 0 1px 0 rgba(255,255,255,.9);
  --emb-low:  inset 0 -1px 0 rgba(20,32,28,.06);
  --emb-well: inset 0 2px 4px rgba(20,32,28,.07), inset 0 -1px 0 rgba(255,255,255,.7);
  --elev-1: 0 1px 2px rgba(20,32,28,.05), 0 6px 16px -10px rgba(20,32,28,.18);
  --elev-2: 0 2px 6px rgba(20,32,28,.07), 0 20px 40px -18px rgba(20,32,28,.24);
  --hero-bg: linear-gradient(152deg, #12261F 0%, #0B3B2E 58%, #0F4A39 100%);
  --hero-ink: #EAF3EF;
  color-scheme: light;
}

/* 2.2 DARK — refined neutral slate. Replaces the old green-black (#141B17):
   a neutral ground makes gain/loss colour read as data rather than as part of
   the surface, which is the convention in professional trading UIs. */
:root[data-theme="dark"] {
  --color-BasicBg: #0F1419; --color-SecondaryBg: #131A21; --color-CardBg: #161C23;
  --color-Vessel: #1C242C; --color-Line: #26313A; --color-Input: #1A222A;
  --color-PrimaryText: #E9EEF2; --color-SecondaryText: #A8B4BD; --color-TertiaryText: #7C8A94;
  --color-HoverBg: #1C242C;
  --ic-accent: var(--brand-400); --ic-accent-hover: var(--brand-300);
  --ic-accent-solid: var(--brand-400); --ic-on-accent: #06231A;
  --color-Buy: #34D399; --color-Sell: #F87171;
  --glass-fill: rgba(255,255,255,.045); --glass-fill-2: rgba(255,255,255,.075);
  --glass-stroke: rgba(255,255,255,.10); --glass-stroke-2: rgba(255,255,255,.17);
  --glass-blur: blur(20px) saturate(140%);
  --emb-high: inset 0 1px 0 rgba(255,255,255,.07);
  --emb-low:  inset 0 -1px 0 rgba(0,0,0,.35);
  --emb-well: inset 0 2px 5px rgba(0,0,0,.42), inset 0 -1px 0 rgba(255,255,255,.05);
  --elev-1: 0 1px 2px rgba(0,0,0,.34), 0 10px 24px -14px rgba(0,0,0,.6);
  --elev-2: 0 2px 6px rgba(0,0,0,.4), 0 28px 56px -20px rgba(0,0,0,.7);
  --hero-bg: linear-gradient(152deg, #16202A 0%, #0E1820 55%, #10231D 100%);
  --hero-ink: #E9EEF2;
  color-scheme: dark;
}

/* 2.3 MIDNIGHT — deep navy. Cooler and darker than `dark`; reads as "after
   hours" without losing legibility. */
:root[data-theme="midnight"] {
  --color-BasicBg: #0A1020; --color-SecondaryBg: #0E1526; --color-CardBg: #121A2E;
  --color-Vessel: #17203A; --color-Line: #212C4A; --color-Input: #141C31;
  --color-PrimaryText: #E7EBF5; --color-SecondaryText: #A3ADC7; --color-TertiaryText: #78849F;
  --color-HoverBg: #17203A;
  --ic-accent: var(--brand-400); --ic-accent-hover: var(--brand-300);
  --ic-accent-solid: var(--brand-400); --ic-on-accent: #06231A;
  --color-Buy: #34D399; --color-Sell: #FB7185;
  --glass-fill: rgba(255,255,255,.05); --glass-fill-2: rgba(255,255,255,.08);
  --glass-stroke: rgba(150,180,255,.12); --glass-stroke-2: rgba(150,180,255,.2);
  --glass-blur: blur(20px) saturate(145%);
  --emb-high: inset 0 1px 0 rgba(190,210,255,.08);
  --emb-low:  inset 0 -1px 0 rgba(0,0,0,.4);
  --emb-well: inset 0 2px 5px rgba(0,0,0,.45), inset 0 -1px 0 rgba(190,210,255,.06);
  --elev-1: 0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.65);
  --elev-2: 0 2px 6px rgba(0,0,0,.45), 0 30px 60px -20px rgba(0,0,0,.75);
  --hero-bg: linear-gradient(152deg, #16203C 0%, #0C1428 55%, #0E2A28 100%);
  --hero-ink: #E7EBF5;
  color-scheme: dark;
}

/* 2.4 SLATE — warm neutral. Lower blue light for long administrative sessions. */
:root[data-theme="slate"] {
  --color-BasicBg: #1A1815; --color-SecondaryBg: #1F1D19; --color-CardBg: #232019;
  --color-Vessel: #2B271F; --color-Line: #38332A; --color-Input: #262219;
  --color-PrimaryText: #F0EBE3; --color-SecondaryText: #B9B1A4; --color-TertiaryText: #8C8477;
  --color-HoverBg: #2B271F;
  --ic-accent: var(--brand-400); --ic-accent-hover: var(--brand-300);
  --ic-accent-solid: var(--brand-400); --ic-on-accent: #06231A;
  --color-Buy: #4ADE80; --color-Sell: #F87171;
  --glass-fill: rgba(255,250,240,.05); --glass-fill-2: rgba(255,250,240,.08);
  --glass-stroke: rgba(255,240,215,.12); --glass-stroke-2: rgba(255,240,215,.19);
  --glass-blur: blur(20px) saturate(135%);
  --emb-high: inset 0 1px 0 rgba(255,245,225,.08);
  --emb-low:  inset 0 -1px 0 rgba(0,0,0,.34);
  --emb-well: inset 0 2px 5px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,245,225,.06);
  --elev-1: 0 1px 2px rgba(0,0,0,.32), 0 10px 24px -14px rgba(0,0,0,.55);
  --elev-2: 0 2px 6px rgba(0,0,0,.38), 0 28px 56px -20px rgba(0,0,0,.66);
  --hero-bg: linear-gradient(152deg, #2A2519 0%, #1C1A14 55%, #1B2A22 100%);
  --hero-ink: #F0EBE3;
  color-scheme: dark;
}

/* 2.5 CONTRAST — accessibility. Pure black ground, white text, thicker strokes.
   Translucency and blur are switched OFF here on purpose: backdrop blur reduces
   effective contrast, which is the opposite of what this theme is for. */
:root[data-theme="contrast"] {
  --color-BasicBg: #000000; --color-SecondaryBg: #060606; --color-CardBg: #0A0A0A;
  --color-Vessel: #141414; --color-Line: #5A5A5A; --color-Input: #101010;
  --color-PrimaryText: #FFFFFF; --color-SecondaryText: #EDEDED; --color-TertiaryText: #C9C9C9;
  --color-HoverBg: #1C1C1C;
  --ic-accent: var(--brand-300); --ic-accent-hover: #A8E9CD;
  --ic-accent-solid: var(--brand-300); --ic-on-accent: #04170F;
  --color-Buy: #4ADE80; --color-Sell: #FF7A7A;
  --glass-fill: #0A0A0A; --glass-fill-2: #141414;      /* opaque: no blur veil */
  --glass-stroke: #6A6A6A; --glass-stroke-2: #8A8A8A;
  --glass-blur: none;
  --emb-high: none; --emb-low: none; --emb-well: none;  /* emboss reads as noise here */
  --elev-1: 0 0 0 1px #5A5A5A; --elev-2: 0 0 0 2px #8A8A8A;
  --hero-bg: #000000;
  --hero-ink: #FFFFFF;
  color-scheme: dark;
}

/* 2.6 EMERALD — brand-forward forest. Surface is brand-800, the same green as
   the demo banner, so the product reads as one object. */
:root[data-theme="emerald"] {
  --color-BasicBg: #08281F; --color-SecondaryBg: #0B3B2E; --color-CardBg: #0F4A39;
  --color-Vessel: #14573F; --color-Line: #1D6B4F; --color-Input: #0D4433;
  --color-PrimaryText: #ECFAF4; --color-SecondaryText: #A9D6C4; --color-TertiaryText: #7FB6A0;
  --color-HoverBg: #14573F;
  --ic-accent: var(--brand-300); --ic-accent-hover: var(--brand-200);
  --ic-accent-solid: var(--brand-300); --ic-on-accent: #04231A;
  --color-Buy: #6EE7B7; --color-Sell: #FCA5A5;
  --glass-fill: rgba(255,255,255,.06); --glass-fill-2: rgba(255,255,255,.1);
  --glass-stroke: rgba(183,236,215,.16); --glass-stroke-2: rgba(183,236,215,.26);
  --glass-blur: blur(20px) saturate(150%);
  --emb-high: inset 0 1px 0 rgba(220,255,240,.1);
  --emb-low:  inset 0 -1px 0 rgba(0,0,0,.3);
  --emb-well: inset 0 2px 5px rgba(0,0,0,.32), inset 0 -1px 0 rgba(220,255,240,.07);
  --elev-1: 0 1px 2px rgba(0,0,0,.28), 0 10px 24px -14px rgba(0,0,0,.5);
  --elev-2: 0 2px 6px rgba(0,0,0,.34), 0 28px 56px -20px rgba(0,0,0,.6);
  --hero-bg: linear-gradient(152deg, #0F4A39 0%, #08281F 55%, #136A4E 100%);
  --hero-ink: #ECFAF4;
  color-scheme: dark;
}

/* ── 3. Ground ──────────────────────────────────────────────────────────── */
:root[data-theme] body {
  background: var(--color-BasicBg);
  color: var(--color-PrimaryText);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Money must never jitter as values refresh, and columns must align down the
   page. Applied to the numeric classes the pages already use. */
:root[data-theme] .num,
:root[data-theme] .tnum,
:root[data-theme] .tile-data-number,
:root[data-theme] .tile-number,
:root[data-theme] .acct-hero-value,
:root[data-theme] .stat-card .value,
:root[data-theme] td.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.01em;
}

/* ── 4. Surface language: emboss + glass ────────────────────────────────────
   Restraint is the point. Cards get a 1px inset highlight so they read as
   machined panels lifted from the substrate. Glass — translucent fill plus
   backdrop blur — is reserved for ELEVATED surfaces (hero, sticky chrome,
   modals). Applying blur to every card is what makes glass look cheap. */
:root[data-theme] .card,
:root[data-theme] .section-card,
:root[data-theme] .tile,
:root[data-theme] .stat-card,
:root[data-theme] .table-card,
:root[data-theme] .chart-card,
:root[data-theme] .acct-panel,
:root[data-theme] .acct-stat {
  background: var(--color-CardBg);
  border: 1px solid var(--color-Line);
  border-radius: var(--r-lg);
  box-shadow: var(--emb-high), var(--emb-low), var(--elev-1);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

:root[data-theme] .card:hover,
:root[data-theme] .section-card:hover,
:root[data-theme] .stat-card:hover,
:root[data-theme] .acct-stat:hover {
  box-shadow: var(--emb-high), var(--emb-low), var(--elev-2);
  border-color: var(--glass-stroke-2);
}

/* Elevated glass. Only these. */
:root[data-theme] .modal,
:root[data-theme] .profile-dropdown,
:root[data-theme] .acct-segbar {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--emb-high), var(--elev-2);
}

/* Sticky chrome reads as glass over scrolling content. */
:root[data-theme] .topbar,
:root[data-theme] .admin-topbar,
:root[data-theme] .site-header {
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-stroke);
  box-shadow: var(--emb-low);
}
/* Opaque fallback where blur is unsupported or disabled, so chrome never
   turns into unreadable transparency over scrolled text. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme] .topbar,
  :root[data-theme] .admin-topbar,
  :root[data-theme] .site-header,
  :root[data-theme] .modal { background: var(--color-SecondaryBg); }
}

:root[data-theme] .sidebar,
:root[data-theme] .admin-sidebar {
  background: var(--color-SecondaryBg);
  border-right: 1px solid var(--color-Line);
}

/* ── 5. Signature: the balance hero as an engraved instrument panel ─────────
   This is the one place the emboss goes deep. It is the most-looked-at element
   in the product, so it gets a recessed well, an engraved hairline, and the
   figure set in tabular digits. Everything else on the page stays quiet. */
:root[data-theme] .acct-hero {
  position: relative;
  background: var(--hero-bg);
  color: var(--hero-ink);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-xl);
  box-shadow: var(--emb-high), var(--emb-low), var(--elev-2);
  overflow: hidden;
}
/* The engraved rule: a hairline that catches light on top and shadow beneath,
   as if milled into the panel. */
:root[data-theme] .acct-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-stroke-2) 22%, var(--glass-stroke-2) 78%, transparent);
  pointer-events: none;
}
:root[data-theme] .acct-hero-value {
  font-size: var(--fs-figure);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}
:root[data-theme] .acct-hero-eyebrow {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: .14em;
  opacity: .72;
}
/* Contained sparklines sit flush in a recess rather than floating on the
   surface. The hero chart is excluded on purpose — it is a full-bleed backdrop,
   not a widget, so a recess ring around it would read as an artefact. */
:root[data-theme] .acct-spark {
  border-radius: var(--r-md);
  box-shadow: var(--emb-well);
}

/* The hero sparkline is a backdrop: every piece of hero content must sit above
   it. Without this the trend line draws straight through the "Available to
   invest" pill, because only .acct-hero-top was lifted out of the stack. */
:root[data-theme] .acct-hero-chart,
:root[data-theme] .acct-hero-chart-m { z-index: 0; }
:root[data-theme] .acct-hero > *:not(.acct-hero-chart):not(.acct-hero-chart-m) {
  position: relative;
  z-index: 1;
}
/* The status pill sits directly over the trend line. Translucent glass let the
   line strike through the label, so it gets an opaque backing — legibility of a
   status word beats seeing 40px more of a decorative curve. */
:root[data-theme] .acct-hero-pill {
  background: rgba(6, 20, 15, .58);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid var(--glass-stroke-2);
  box-shadow: var(--emb-high);
}
:root[data-theme="contrast"] .acct-hero-pill {
  background: #000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: #8A8A8A;
}

/* ── 6. Controls ────────────────────────────────────────────────────────── */
:root[data-theme] .btn {
  border-radius: var(--r-sm);
  min-height: var(--tap);
  font-size: var(--fs-body);
  transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}
:root[data-theme] .btn-sm { min-height: 34px; }
:root[data-theme] .btn-primary {
  background: var(--ic-accent);
  border: 1px solid var(--ic-accent);
  color: #04150F;
  box-shadow: var(--emb-high), var(--elev-1);
}
:root[data-theme] .btn-primary:hover { background: var(--ic-accent-hover); }
:root[data-theme] .btn:active { transform: translateY(1px); }

:root[data-theme] .form-input,
:root[data-theme] input[type="text"],
:root[data-theme] input[type="email"],
:root[data-theme] input[type="password"],
:root[data-theme] input[type="number"],
:root[data-theme] select,
:root[data-theme] textarea {
  background: var(--color-Input);
  border: 1px solid var(--color-Line);
  color: var(--color-PrimaryText);
  border-radius: var(--r-sm);
  min-height: var(--tap);
  font-size: max(16px, var(--fs-body));   /* ≥16px stops iOS zooming on focus */
  box-shadow: var(--emb-well);
}
:root[data-theme] textarea { min-height: 88px; }

/* Focus must be visible in every theme — never removed, only styled. */
:root[data-theme] :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ic-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── 7. Responsive normalization ────────────────────────────────────────────
   Intrinsic sizing first: rows reflow by available space rather than by
   breakpoint, so the 14 pages with no media queries become responsive too. */
:root[data-theme] .stats-row,
:root[data-theme] .acct-section-row,
:root[data-theme] .tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(232px, 100%), 1fr));
  gap: var(--sp-4);
}

/* Financial tables must never squash — columns stay legible and the table
   scrolls within its card instead. */
:root[data-theme] .table-card,
:root[data-theme] .acct-panel,
:root[data-theme] .acct-panel-scroll { max-width: 100%; }
:root[data-theme] .acct-panel-scroll,
:root[data-theme] .table-wrap,
:root[data-theme] .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
:root[data-theme] .data-table,
:root[data-theme] .acct-inv-table { width: 100%; border-collapse: collapse; }
:root[data-theme] .data-table th,
:root[data-theme] .data-table td { border-bottom: 1px solid var(--color-Line); }

/* Nothing may push the page sideways. */
:root[data-theme] body { overflow-x: hidden; }
:root[data-theme] img,
:root[data-theme] svg,
:root[data-theme] canvas { max-width: 100%; height: auto; }

@media (max-width: 720px) {
  :root[data-theme] .page-container,
  :root[data-theme] .main-content,
  :root[data-theme] .page { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  :root[data-theme] .col-hide-mobile { display: none; }
  :root[data-theme] .acct-hero { border-radius: var(--r-lg); }
  /* Buttons go full-width rather than wrapping into unreadable fragments. */
  :root[data-theme] .acct-hero-btn { width: 100%; justify-content: center; }
}

/* ── 8. Motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] *,
  :root[data-theme] *::before,
  :root[data-theme] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 9. Print — statements should print as documents, not as dark screens. */
@media print {
  :root[data-theme] body { background: #fff; color: #000; }
  :root[data-theme] .topbar,
  :root[data-theme] .admin-topbar,
  :root[data-theme] .sidebar,
  :root[data-theme] .admin-sidebar,
  :root[data-theme] #ic-demo-banner { display: none !important; }
  :root[data-theme] .card,
  :root[data-theme] .acct-panel { box-shadow: none; border: 1px solid #ccc; }
}