/* ════════════════════════════════════════════════════════════════════
   TOKENS — the single :root for the app.

   Phase 1c hoisted every colour behind a token with ZERO visual change.
   Phase 1d (this) applies the approved remap: navy -> green. It is a
   deliberate visual change and css-equivalence.js is EXPECTED to fail
   against phase-1c — that is the point of the phase. What must hold is
   narrower: every changed declaration traces to a line on the mapping
   list below, and nothing outside it moved.

   Fonts are phase 1e. One variable at a time.

   THE MAPPING LIST — the whole of 1d:
     --navy       #1a2744  ->  --primary     #006242
     --gold       #c9a84c  ->  --accent      #f59e0b
     --gold-light #f5ecd4  ->  --accent-soft #E2EFE8
     --light      #f7f8fc  ->  --ground      #F2F5F3
     --border     #dde3ef  ->  --line        #DCE3DF
     --text       #1a2744  ->  --ink         #1C2722
     --mid        #4a5568  ->  --slate       #3B5268
     --muted      #8898b0  ->  --muted       #5C6B63   (value only, same name)
   Plus the sidebar variant block at the bottom.

   NOTHING COLLAPSES. --tb-slate, --tb-load-text, --callout-bg, --page-bg and
   friends keep their current values even where they share a hex with a palette
   token. Sharing a value does not make two things the same thing; folding them
   in would move pixels that are not on the list.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand palette ── */
  --primary:#006242;
  --primary-dk:#00492F;      /* used by the Loan Scenario tool (worksheet header, close-btn
                                hover). Consolidated from scenario.css's own :root at 2c —
                                tokens.css had never defined it, so a var(--primary-dk) in
                                scenario.css would have dangled once its :root was removed. */
  --accent:#f59e0b;          /* phase 1b: one token, no split. See KNOWN-ISSUES #3
                                before touching this — the split was declined
                                deliberately, on appearance, not by oversight. */
  --accent-soft:#E2EFE8;
  --ground:#F2F5F3;
  --line:#DCE3DF;
  --ink:#1C2722;
  --muted:#5C6B63;
  --slate:#3B5268;

  /* ── Typography (phase 1e) ──
     One <link> in index.html loads both families. Inter is gone.
     Every font-family in status.css routes through --ui: a 1:1 substitution, so
     1e changes the typeface and nothing else. --display has no consumer here yet;
     the Loan Scenario tool uses it and phase 2 brings it in. Which headings deserve
     the display face (.home-header h1, .settings-header h1 are the candidates) is a
     design call, not part of a font swap. */
  --ui:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --display:'Bricolage Grotesque', system-ui, sans-serif;

  /* ── Surfaces & contrast ──
     Three whites, by what they sit on. --paper is a surface; --on-primary is
     text/icons on a BRAND background; --on-status is text/icons on a SEMANTIC
     background (see below). Collapsing them would mean a dark theme that
     recolours the page also inverts button text and check marks. */
  --paper:#fff;
  --on-primary:#fff;
  --page-bg:#eef1f7;

  /* ── Neutral detail — not on the mapping list, values unchanged ── */
  --hairline:#f2f4f8;        /* hairline borders */
  --surface-hover:#f2f4f8;   /* input hover fill — same value as --hairline, different job */
  --focus-soft:#fff8e1;      /* input focus fill */
  --utility-bar:#10192e;     /* .tab-utility-row */
  --callout-bg:#f7f8fc;      /* .ds-callout */
  --cm-head-bg:#fdf8ec;      /* .cm-head */

  /* ════════════════════════════════════════════════════════════════
     SEMANTIC STATUS COLOURS — NAMED, NOT THEMED.
     These carry meaning, not brand. A completed check is green in every
     theme; an error is red in every theme. A theme switcher must NOT
     reach these. They are tokens so they can be referenced and audited,
     not so they can be recoloured.
     ════════════════════════════════════════════════════════════════ */

  /* Contrast text/icons sitting ON a semantic background — the ✓ in a green
     checkbox, the ✕ in an orange one, the Agent View check marks. Separate from
     --on-primary on purpose: these must follow the semantic colours, not the
     theme. If a theme moved --on-primary, pointing these at it would silently
     drag the check marks along with it. */
  --on-status:#fff;

  --check:#27a862;           /* complete */
  --ex:#e53e3e;              /* failed / removed */
  --ex-soft:#fdf2f2;         /* destructive hover fill */
  --inprog:#e07b00;          /* in process */
  --inprog-line:#ffcc80;
  --inprog-soft:#fff8ef;
  --inprog-soft-hover:#fff3e0;

  /* Notes-present highlight. Fires only when a Notes variant has real text —
     a state indicator, same family as --check / --ex. Not themeable. */
  --note:#f9a825;
  --note-hover:#f57f17;
  --note-label:#b8860b;
  --note-fill:#ffd54a;
  --note-stroke:#8a6d00;

  /* Copy action. No analogue in the palette, so no remap. */
  --info:#2563eb;

  /* ── Loan Scenario tool: semantic status (named, NEVER themed on either axis) ── */
  --dti-warn:#f9cc6a;        /* DTI ratio in the warning band — money path, like --inprog */
  --dti-danger:#f87171;      /* DTI ratio over the limit — money path, like --ex */
  --danger:#b91c1c;          /* destructive action (delete/remove). Unifies scenario.css's
                                delete/remove hovers with index.html's deleteFile button. */
  --hl-total:#fef08a;        /* "total" cell highlight — a total stays yellow in any theme */
  --hl-source:#dbeafe;       /* "source" cell highlight (payment source) — data indicator */

  /* ── Loan Scenario tool: normal UI (themeable on BOTH axes — palette and mode) ── */
  --placeholder:#9aa8a0;     /* input / notes / agent-block placeholder text */
  --cc-placeholder:#c0ccc6;  /* closing-costs placeholder & idle-handle grey */
  --table-even:#f8f3ea;      /* comparison-table zebra (even column) */
  --table-section:#f7f8f7;   /* comparison-table section-header row */
  --dti-badge-bg:#2E4356;    /* DTI badge background (JS-built) */
  --note-callout-bg:#fff8e1;      /* checklist info/note callout — background. Shares #fff8e1's
                                     value with --focus-soft but is a different job (a note box,
                                     not an input focus fill); kept separate, never folded. */
  --note-callout-border:#f9e29c;  /* note callout — border */
  --note-callout-ink:#7a5c00;     /* note callout — text */
  --overlay-bg:#f4f5f4;      /* #wsView on-screen worksheet backdrop — the desk the paper
                                sits on. Screen chrome, themeable BOTH axes: under dark mode
                                the desk darkens and the sheet stays white, which is correct.
                                Distinct from the --ws-* worksheet content (palette-not-mode). */

  /* ── Loan Scenario tool: more semantic status (named, NEVER themed) ── */
  --savings-pos:#8FD9B6;     /* refi savings >= 0 — light mint on a dark row (ternary-picked) */
  --savings-neg:#FCA5A5;     /* refi savings < 0 — light red on a dark row. NOT interchangeable
                                with --dti-danger: that is dark text on light; this is light on
                                dark. Same concept, opposite background, different value. */
  --warn-bg:#fff7ed;         /* IPC / credits-exceed warning callout background */
  --warn-ink:#92400e;        /* IPC / credits warning text */
  --credit-total:#b45309;    /* concession/credit total value — amber money indicator. Shares
                                NO token with #B45309 in the IOT_COLORS chart array: same hex,
                                different case, unrelated job. Never fold them. */

  /* ════════════════════════════════════════════════════════════════
     PRINT WORKSHEET — follows PALETTE, never MODE.

     The #cc-print-sheet subtree (ccPrintWorksheet) is a paper artifact: previewed on
     screen, then printed and handed to a client. It uses the brand greens, so a rebrand
     SHOULD move it — but a dark mode must NOT, or it prints a black sheet and drains a
     toner cartridge. "Theme" is two axes, palette and mode; this subtree follows the
     first and ignores the second.

     THAT IS A CONSTRAINT ON A FUTURE THEME SWITCHER, not on these values: the switcher
     must not apply mode changes inside the worksheet subtree (or inside @media print).
     Freezing the literals instead would mean hand-editing a client-facing worksheet on
     every brand change. See KNOWN-ISSUES and the CLAUDE.md palette/mode note.
     ════════════════════════════════════════════════════════════════ */
  --ws-deep:#1a2e22;         /* summary panel + primary button background */
  --ws-deep-hover:#2a4a38;   /* close-button hover */
  --ws-ink:#1a1a1a;          /* worksheet body text + total-row rule */
  --ws-rule:#c8d8cc;         /* column-heading underline */
  --ws-rule-soft:#e0e0e0;    /* section / disclaimer hairline */
  --ws-muted:#777;           /* disclaimer text */
  --ws-muted-strong:#555;    /* loan-officer line */
  --ws-btn-hover:#f0f4f2;    /* print-button hover */
  --ws-credit:#f9cc6a;       /* worksheet credit amount. Shares #f9cc6a's value with
                                --dti-warn but is a different job (worksheet, not DTI) — kept
                                separate per the don't-fold-on-value rule. */

  /* ── Utility toolbar button palette ──
     An arbitrary set with no analogue in the palette. Values unchanged.
     --tb-slate shares a hex with the old --mid and --tb-load-text with the old
     --navy; sharing a hex does not make them the same token. Not remapped. */
  --tb-teal:#2a9d8f;
  --tb-save:#264653;
  --tb-load:#e9c46a;
  --tb-load-text:#1a2744;
  --tb-slate:#4a5568;
}

/* ════════════════════════════════════════════════════════════════════
   SIDEBAR — VARIANT A (white).

   This block IS the sidebar's appearance. Everything the sidebar renders
   routes through --sb-*, so switching variants is editing this one block and
   nothing else. To go ink instead, replace the values with:
       --sb-bg:var(--ink); --sb-border:rgba(255,255,255,.14);
       --sb-brand:var(--paper); --sb-item:rgba(255,255,255,.70);
       --sb-item-active:var(--paper); --sb-muted:rgba(255,255,255,.50);
       --sb-hover-bg:rgba(255,255,255,.07); --sb-active-bg:rgba(255,255,255,.12);
       --sb-accent:#4FBF8B; --sb-icon-bg:var(--primary); --sb-icon-fg:var(--on-primary);

   Note the sidebar's accent is --primary (green), NOT --accent (amber). The
   sidebar is white, so green accents have contrast and need no amber; the old
   gold accent existed to read against navy, and navy is gone.
   ════════════════════════════════════════════════════════════════════ */
.app-sidebar {
  --sb-bg:          var(--paper);
  --sb-border:      var(--line);
  --sb-brand:       var(--primary);
  --sb-item:        var(--slate);
  --sb-item-active: var(--primary);
  --sb-muted:       var(--muted);
  --sb-hover-bg:    var(--ground);
  --sb-active-bg:   var(--accent-soft);
  --sb-accent:      var(--primary);
  --sb-icon-bg:     var(--primary);
  --sb-icon-fg:     var(--on-primary);
}