/**
 * SBA Loan Exchange — THEME LAYER (quick 260822-8az)
 * ==================================================
 * Light is the PRODUCT DEFAULT for every profile. Dark survives as an opt-in the
 * user picks from the toggle; the choice is persisted in `localStorage['sbalx-theme']`.
 *
 * WHY THIS FILE OVERRIDES INSTEAD OF REPLACING
 * --------------------------------------------
 * Every page ships its own inline `:root{…}` block holding the original dark
 * tokens. Rewriting fifteen of those blocks would be a large, easy-to-break diff.
 * Instead this sheet wins on SPECIFICITY:
 *
 *     :root                    → (0,1,0)
 *     html[data-theme="light"] → (0,1,1)   ← wins, regardless of source order
 *
 * So the inline blocks stay exactly as they are and keep describing the dark
 * design; this file only has to state what LIGHT means (plus an explicit dark
 * block, because the admin console has no inline tokens of its own and because
 * toggling back to dark must land on the original values, not on "whatever the
 * page happened to declare").
 *
 * Because the sheet only re-points token VALUES, no layout, spacing or component
 * CSS had to move — `--dark*` is used exclusively as a surface across the tree
 * (there is not one `color: var(--dark*)` anywhere), so the names keep working
 * as "surface levels" even when those surfaces are pale.
 *
 * CSP: `admin/vercel.json` sets `script-src 'self'; style-src 'self'` — no inline
 * style or script is allowed on the admin origin. This file and `js/theme.js` are
 * therefore external and same-origin, and are duplicated into `admin/` because
 * that directory is a separate Vercel project with its own deploy root.
 *
 * CONTRAST: every foreground token below was chosen against measured WCAG 2.1
 * ratios on the three light surfaces it can land on (`#FFFFFF` panel, `--dark`
 * page, `--dark4` active-nav) — all clear AA (>= 4.5:1) for body text. The dark
 * values are the originals and are unchanged.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT — the default
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  color-scheme: light;

  /* ── surfaces (the `--dark*` names are surface LEVELS, not literal darkness) ── */
  --dark: #F6F7F6;    /* page canvas                                    */
  --dark2: #FFFFFF;   /* sidebar, cards, raised panels                  */
  --dark3: #F0F2F0;   /* hover, inset wells, inputs                     */
  --dark4: #E9EDE9;   /* active / selected                              */
  --dark5: #DFE4DF;   /* deepest chip                                   */

  /* ── hairlines ── */
  --border: #E3E6E3;
  --border2: #D5D9D5;
  --border3: #C2C8C2;

  /* ── text (AA on every surface above) ── */
  --txt: #121815;     /* 17.99:1 on white */
  --txt2: #49524D;    /*  8.09:1 on white */
  --txt3: #626B65;    /*  5.51:1 on white — 307 usages, the muted workhorse */

  /* ── green: brand + success ── */
  --g: #1B5E20;
  --g2: #2A7430;      /* 237 usages as text — the single most load-bearing accent */
  --g3: #1B5E20;      /* was a pale on-dark green; on white it must go deep */
  --g4: #DCEEDD;      /* tint, background only */

  /* ── orange: attention ── */
  --o: #A83D0B;
  --o2: #AC4600;
  --o3: #9C4700;      /* was #FFB74D — invisible on white as text */

  /* ── blue: informational ── */
  --b: #12539C;
  --b2: #1565C0;
  --b3: #0E5FAE;      /* was #64B5F6 */

  /* ── status ── */
  --gold: #7A5200;    /* see the .r1 rank-badge override below */
  --gold2: #8A5D00;
  --red: #C62828;
  --red2: #B3261E;
  --crit: #C62828;
  --warn: #9C4700;
  --info: #0E5FAE;

  /* ── referral / broker purple ── */
  --pur: #5433CC;
  --pur2: #6A4BB8;

  /* Primary buttons darken on hover. In dark that meant "go to #1b5e20"; in light
     `--g` IS #1B5E20, so hover needs its own, deeper step. */
  --g-deep: #12441A;

  /* Pipeline stages. These are painted as TEXT (column titles, stage badges), so on
     a pale canvas the original ramp — which brightened towards `funded` — inverts:
     it has to deepen instead. Hue order is preserved so the stages stay tellable
     apart at a glance. */
  --stage-lead: #4E5A61;
  --stage-prequalified: #AC4600;
  --stage-underwriting: #1565C0;
  --stage-submitted: #00695C;
  --stage-approved: #2A7430;
  --stage-commitment: #1B7A3D;
  --stage-closing: #33691E;
  --stage-funded: #1B5E20;
  --stage-declined: #C62828;
  --stage-withdrawn: #5F6368;

  /* Credit-memo verdict chips (approve / conditions / decline). */
  --verdict-good: #1B7A3D;
  --verdict-warn: #8A5A00;
  --verdict-bad: #C0362E;

  /* Translucent surfaces. These could not be tokens before — they are rgba(), not hex,
     so the literal sweep never saw them, and a fixed `rgba(10,10,10,.92)` nav bar stayed
     black under a light page (with `--txt` text on it: invisible). */
  --nav-bg: rgba(255, 255, 255, .92);
  /* A modal scrim still dims, but .7 black over a pale page reads as a blackout. */
  --scrim: rgba(16, 24, 20, .45);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK — opt-in, the original palette verbatim
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  color-scheme: dark;

  --dark: #0A0A0A;
  --dark2: #111111;
  --dark3: #161616;
  --dark4: #1C1C1C;
  --dark5: #222222;

  --border: #222222;
  --border2: #2A2A2A;
  --border3: #333333;

  --txt: #E8E8E8;
  --txt2: #A0A0A0;
  --txt3: #8A8A8A;

  --g: #2E7D32;
  --g2: #4CAF50;
  --g3: #81C784;
  --g4: #C8E6C9;

  --o: #C84B0F;
  --o2: #EF6C00;
  --o3: #FFB74D;

  --b: #1565C0;
  --b2: #1976D2;
  --b3: #64B5F6;

  --gold: #F9A825;
  --gold2: #FFD54F;
  --red: #E53935;
  --red2: #EF5350;
  --crit: #E53935;
  --warn: #FFB74D;
  --info: #64B5F6;

  --pur: #7C4DFF;
  --pur2: #B39DDB;

  --g-deep: #1B5E20;

  --stage-lead: #546E7A;
  --stage-prequalified: #EF6C00;
  --stage-underwriting: #1976D2;
  --stage-submitted: #2E7D32;
  --stage-approved: #4CAF50;
  --stage-commitment: #66BB6A;
  --stage-closing: #81C784;
  --stage-funded: #A5D6A7;
  --stage-declined: #E53935;
  --stage-withdrawn: #9E9E9E;

  --verdict-good: #4CBD82;
  --verdict-warn: #E0A94A;
  --verdict-bad: #E5726B;

  --nav-bg: rgba(10, 10, 10, .92);
  --scrim: rgba(0, 0, 0, .7);
}

/* `--txt1` is referenced once (broker.html, the empty-matches hint) but was never
   defined anywhere — it silently fell back to the inherited colour. Alias it so the
   hint is legible in both themes. */
html[data-theme] {
  --txt1: var(--txt);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT-ONLY RULE OVERRIDES
   Rules whose problem is not the token's value but the PAIRING. Each is prefixed
   with `html[data-theme="light"]`, which outranks the page's own class selectors,
   so no page CSS had to be edited.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The rank-1 match badge paints black ink on `--gold`. `--gold` had to go deep in
   light because it is also read AS TEXT, and #F9A825 is 1.97:1 on white — unreadable.
   Against the new gold, black falls to 3.03:1 while white reaches 6.92:1, so the
   badge flips its ink rather than giving up the token. */
html[data-theme="light"] .match-rank.r1,
html[data-theme="light"] .match .rank.r1 {
  color: #fff;
}

/* Overlay shadows were cast for a black canvas; at .4–.5 alpha they read as a smudge
   on a pale one. Same elevation, appropriate weight. */
html[data-theme="light"] .toast,
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .drawer {
  box-shadow: 0 8px 24px rgba(16, 32, 22, .14);
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME TOGGLE — mounted by js/theme.js, styled here (CSP: no inline style)
   ═══════════════════════════════════════════════════════════════════════════ */
.sbalx-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--dark3);
  color: var(--txt2);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}

.sbalx-theme-toggle:hover {
  background: var(--dark4);
  color: var(--txt);
  border-color: var(--border3);
}

.sbalx-theme-toggle:focus-visible {
  outline: 2px solid var(--g2);
  outline-offset: 2px;
}

.sbalx-theme-toggle .sbalx-theme-icon {
  font-size: 13px;
  line-height: 1;
}

/* Only one label is shown at a time — the one naming the theme you'd switch TO. */
html[data-theme="light"] .sbalx-theme-toggle .sbalx-when-dark,
html[data-theme="dark"] .sbalx-theme-toggle .sbalx-when-light {
  display: none;
}

/* In a sidebar footer the control is stacked under the user chip, so it takes the
   full width and needs its own breathing room. */
.sidebar-footer .sbalx-theme-toggle,
.sidebar-foot .sbalx-theme-toggle {
  width: 100%;
  margin-top: 10px;
}

/* Fallback placement: a page with none of the shell anchors still gets a control.
   Bottom-LEFT on purpose — toasts are fixed to the bottom-right, and a floating
   button there would sit under them. */
.sbalx-theme-toggle.sbalx-floating {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9999;
  background: var(--dark2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

@media print {
  .sbalx-theme-toggle { display: none !important; }
}