@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..500&family=Spline+Sans:wght@300;400;500;600;700&family=Cinzel:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ════════════════════════════════════════════════════════════════════
   VESPER SKIN — warm/editorial repaint overlay  (design handoff, deploy/shell)
   Loaded AFTER /vesper-theme.css so its token VALUES win. Presentation-only:
   it remaps the legacy token NAMES (--brass/--cool/--mono/--crimson) onto a
   single deep-blue accent + cream paper, so existing markup keeps resolving
   with zero per-element edits. Cream paper, espresso ink (high contrast),
   Newsreader display, Spline Sans body/labels, no grain, no day/dusk.

   KIT v1 (2026-07-02): this file now owns the 2 palettes × 2 modes matrix.
   The warm-day block below stays the default (`:root`); three paired blocks
   (warm-dusk / slate-day / slate-dusk) follow it, keyed on
   `html[data-palette][data-mode]` — vesper-boot.js pre-paints BOTH attrs
   from localStorage('vesper-palette'/'vesper-mode') before first render, and
   the rail toggles in vesper-sidebar.js flip them. Token NAMES are frozen —
   values flip, markup never changes.

   `html.dusk` stays in the selector list below as a compat catch ONLY: an
   unbooted/stale legacy state (old localStorage 'dark' + a cached page that
   still adds the class) resolves to warm-day instead of leaking the retired
   v2 dark palette (whose vesper-theme.css block was deleted with this change
   — the "Stage 4" note, executed). The old html[data-mode=…] force-map
   entries are gone: they mapped every mode to light values at (0,1,1) and
   would out-specify nothing, but their presence forced dusk → day.
   ════════════════════════════════════════════════════════════════════ */

:root,
html.dusk{
  color-scheme:light;           /* native controls/scrollbars follow the mode */

  /* ── surfaces — warm cream ─────────────────────────────────── */
  --paper:#F4EEE2;
  --paper-2:#FCFAF3;
  --paper-3:#EBE3D2;
  --paper-4:#E0D6C0;
  --lobby-bg:var(--paper-3);    /* follows palette/mode instead of pinning cream */

  /* ── ink — espresso, high contrast ─────────────────────────── */
  --ink:#241D14;
  --ink-soft:#56493A;
  --muted:#8A7C66;
  --muted-2:#AC9E86;

  /* ── hairlines ─────────────────────────────────────────────── */
  --line:rgba(60,45,25,0.14);
  --line-soft:rgba(60,45,25,0.075);
  --line-strong:rgba(60,45,25,0.22);

  /* ── the one confident accent — deep ink-blue (contrasty on cream) ── */
  --accent:#2B4C9E;
  --accent-strong:#1E3877;
  --accent-bright:#4E74C8;
  --accent-soft:rgba(43,76,158,0.10);
  --accent-softer:rgba(43,76,158,0.06);
  /* heading italic accent — warm-dusk overrides to brass, all else = accent-strong */
  --em:var(--accent-strong);

  /* ── semantic (sparingly) ──────────────────────────────────── */
  --neg:#A8402C;
  --neg-soft:rgba(168,64,44,0.10);
  --good:#3F7D5A;

  /* ── type — editorial serif display + clean sans body + mono labels ──────
     Kit v1 canon: eyebrows / KPI labels / amounts / meta are IBM Plex Mono
     (the kit + every r1 mockup use it). The v3.0-era "--mono → Spline Sans"
     remap is reverted here — it was the one foundation drift from the kit. */
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --body:'Spline Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono','Spline Sans Mono',ui-monospace,SFMono-Regular,monospace;
  --brand:'Cinzel',Georgia,serif;        /* original wordmark face, kept for VESPER only */

  /* ── grain off ─────────────────────────────────────────────── */
  --grain-opacity:0;

  /* ── COMPAT: legacy accent names → the single blue ─────────── */
  --brass:var(--accent);
  --brass-dim:var(--muted);
  --brass-bright:var(--accent-bright);
  --brass-soft:var(--accent-soft);
  --cool:var(--accent);
  --cool-strong:var(--accent-strong);
  --cool-soft:var(--accent-soft);
  --crimson:var(--neg);
  --bad:var(--neg);
  --navy:var(--accent-strong);
  --bob:#6D49C4;

  /* ── harmonized warm categorical scale (replaces rainbow --s1..7) ── */
  --s1:#B0573F; --s2:#3F7D7B; --s3:#B88A3F; --s4:#7A5C9E;
  --s5:#5F876D; --s6:#3360A8; --s7:#9C5630;
}

/* ════════════════════════════════════════════════════════════════════
   KIT v1 TOKEN MATRIX — the three non-default palette×mode value sets.
   Same frozen names as the warm-day block above; values only. The compat
   remaps (--brass/--cool/--crimson→var(--accent…)) live in the base block
   and resolve against whichever --accent wins here, so legacy markup
   follows the palette for free. Boot always writes BOTH attrs (§3/A2), so
   these paired selectors own every real combination.
   ════════════════════════════════════════════════════════════════════ */
html[data-palette="warm"][data-mode="dusk"]{
  color-scheme:dark;
  --paper:#181310; --paper-2:#201A15; --paper-3:#29211A; --paper-4:#342A21;
  --ink:#F0E8D8; --ink-soft:#C9BCA4; --muted:#96876C; --muted-2:#6E6250;
  --line:rgba(240,232,216,.11); --line-soft:rgba(240,232,216,.06); --line-strong:rgba(240,232,216,.20);
  --accent:#7D9BDE; --accent-strong:#A3BCF0; --accent-bright:#5C7FC9;
  --accent-soft:rgba(125,155,222,.13); --accent-softer:rgba(125,155,222,.07);
  --neg:#D97A62; --good:#7FAE8E;
  --em:#D9AE62;   /* dusk headings' italic goes brass, not pale blue */
  --s1:#C97A62; --s2:#6BA8A4; --s3:#D2A55A; --s4:#9E82C4; --s5:#8FAE93; --s6:#7D9BDE; --s7:#C08A5E;
}
html[data-palette="slate"]{
  color-scheme:light;
  --paper:#F0F2F1; --paper-2:#FAFBFA; --paper-3:#E2E6E4; --paper-4:#D4DAD7;
  --ink:#1B2422; --ink-soft:#46554F; --muted:#71827B; --muted-2:#9AA8A2;
  --line:rgba(20,40,35,.13); --line-soft:rgba(20,40,35,.07); --line-strong:rgba(20,40,35,.20);
  --accent:#33766F; --accent-strong:#245A54; --accent-bright:#4C9A91;
  --accent-soft:rgba(51,118,111,.10); --accent-softer:rgba(51,118,111,.055);
  --neg:#A8402C; --good:#5F876D;
  --s1:#B0573F; --s2:#33766F; --s3:#A08340; --s4:#5F6FA8; --s5:#5F876D; --s6:#3360A8; --s7:#9C5630;
}
html[data-palette="slate"][data-mode="dusk"]{
  color-scheme:dark;
  --paper:#10171A; --paper-2:#161F23; --paper-3:#1D282D; --paper-4:#253238;
  --ink:#E3EAE7; --ink-soft:#B4C1BC; --muted:#7E8F89; --muted-2:#596863;
  --line:rgba(227,234,231,.11); --line-soft:rgba(227,234,231,.06); --line-strong:rgba(227,234,231,.20);
  --accent:#6FB8AE; --accent-strong:#93D2C8; --accent-bright:#579A91;
  --accent-soft:rgba(111,184,174,.13); --accent-softer:rgba(111,184,174,.07);
  --neg:#D97A62; --good:#8FBF9F;
  --s1:#C97A62; --s2:#6FB8AE; --s3:#C4A566; --s4:#8B9AD4; --s5:#8FAE93; --s6:#7D9BDE; --s7:#C08A5E;
}

/* ════════════════════════════════════════════════════════════════════
   ROUND-1 SHARED RECIPES (TWEAKS-round1.md cross-page items)
   ════════════════════════════════════════════════════════════════════ */

/* T5 — MARK affordance contrast: readable at rest in both modes. Recipe:
   border line-strong · label ink-soft. Applied to the shipped MARK controls;
   page PRs extend the selector list (shell drill footer P14/BD10). */
.mark-btn,
.bpB-mark-chip{
  border-color:var(--line-strong);
  color:var(--ink-soft);
}

/* T6 — dusk selected chips/segs: solid accent fills glare on dark paper.
   Recipe: accent-soft bg · accent border · accent-strong label. Dusk-scoped;
   day keeps its solid fills (owner call pending a day adoption). Grouped
   selector list = every .on control verified in the round-1 pass; page PRs
   append theirs (record vrC chips ride R7, home seg rides H6). */
html[data-mode="dusk"] .fy-seg button.on,
html[data-mode="dusk"] .ledger-mode button.on,
html[data-mode="dusk"] .canvas-inner .vs-tab.on,
html[data-mode="dusk"] .canvas-inner .vs-facet.on,
html[data-mode="dusk"] .bpB-fchip.on,
html[data-mode="dusk"] .bpB-fchip.on.single,
html[data-mode="dusk"] .rp-tab.on,
html[data-mode="dusk"] .rp-chip.on,
html[data-mode="dusk"] .lp-tab.on,
html[data-mode="dusk"] .vrC-date-btn.on,
html[data-mode="dusk"] .gear-opts button.on{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-strong);
}
html[data-mode="dusk"] .rp-chip.on .rp-chip-count{ color:var(--accent-strong); opacity:.75; }

/* L12/S10 — seg focus ring doubled the selected border. One shared fix: the
   keyboard ring sits clearly OUTSIDE the control so selected+focused reads
   as ring-around-chip, not double border. */
.fy-seg button:focus-visible,
.ledger-mode button:focus-visible,
.canvas-inner .vs-tab:focus-visible,
.canvas-inner .vs-facet:focus-visible,
.bpB-fchip:focus-visible,
.rp-tab:focus-visible,
.rp-chip:focus-visible,
.lp-tab:focus-visible,
.vrC-date-btn:focus-visible{
  outline-offset:2px;
}

/* Kit radius parity (owner call 2026-07-03) — the kit + every r1 mockup round
   interactive elements (chips, buttons, segs, slots, badges, the summary box)
   at 8–10px; the shipped 2–4px read too technical. Bumped in ONE place: the
   skin loads last and wins on equal specificity, so this leaves progress-bar
   tracks (.po-bar/.pf-bar/.fund-bar/sliders), categorical dots, and inline
   code at their intentional tight radii. Cards/tiles already ship at 12px.
   Selectors mirror the shipped ones so specificity matches (later-load wins). */
.mark-btn, .bpB-mark-chip, .bpB-fchip, .chip, .omni-mode, .omni-ask,
.feed-ag-sel, .row-tag, .rec-act, .vxb-more, .vx-lead-more,
.vcb-ask, .vcb-omni, .vcb-slot > *{
  border-radius:8px;
}
.lob .br{ border-radius:8px; }
.ledger-mode, .fy-seg, .pivot-seg{ border-radius:9px; }
.bp-sum{ border-radius:10px; }
.feed-fl-l b{ border-radius:6px; }

/* ── tile depth — inert unless html[data-depth] is set (design-repo control;
   NEVER a user toggle). Flat is the shipped default: hairline border, no
   shadow. Warm shadows are espresso-tinted (25,18,8); dusk goes pure black.
   If slate ever ships paper, it wants a cool tint (~15,25,22) — moot while
   flat is default. Extend the selector list as new bento surfaces land. ── */
html[data-depth="paper"] .vx-tile{box-shadow:0 1px 2px rgba(25,18,8,.05),0 3px 8px rgba(25,18,8,.05)}
html[data-depth="lift"] .vx-tile{box-shadow:0 2px 4px rgba(25,18,8,.07),0 12px 28px rgba(25,18,8,.10)}
html[data-mode="dusk"][data-depth="paper"] .vx-tile{box-shadow:0 1px 2px rgba(0,0,0,.30),0 3px 9px rgba(0,0,0,.24)}
html[data-mode="dusk"][data-depth="lift"] .vx-tile{box-shadow:0 2px 5px rgba(0,0,0,.34),0 14px 30px rgba(0,0,0,.30)}

/* ── kill paper grain + warm body washes everywhere ─────────── */
body::before{ content:none !important; background:none !important; opacity:0 !important; }
body{
  background-image:none !important;
  background-color:var(--paper) !important;
  color:var(--ink);
  font-family:var(--body);
  font-variant-numeric:tabular-nums;       /* align all figures, no mono needed */
  transition:background-color .3s,color .3s;   /* mode/palette flip (kit §07) */
}

/* editorial serif headings; italic emphasis allowed + accent-tinted */
h1,h2,h3,h4,h5{
  font-family:var(--display) !important;
  letter-spacing:-0.012em;
}
h1 em,h2 em,h3 em,h4 em{
  font-family:var(--display) !important;
  font-style:italic;
  color:var(--em);          /* accent-strong everywhere except warm-dusk (brass) */
  font-weight:inherit;
}

/* drop legacy brass glow filters on marks */
.nav-mark,.vr-nav-mark,.vl-nav-mark,.bp-nav-mark,.vb-nav-mark{ filter:none !important; }

/* day/dusk toggle retired everywhere */
.mode-toggle{ display:none !important; }

/* ════════════════════════════════════════════════════════════════════
   SHELL RECORD PANEL — slide-out contrast + blue accent
   The record aside was --paper-3 with a 1px hairline divider → it blended
   into the cream canvas. Lift it to a brighter elevated surface, firm up the
   divider, and add a 3px blue spine (mirrors the existing inline-record edge)
   so the detail rail announces itself. Blue stays an ACCENT, not a fill.
   Loaded after vesper-shell.css, so these win without !important.
   ════════════════════════════════════════════════════════════════════ */
.record{
  background:var(--paper-2);
  border-left:3px solid var(--accent);
}
.stage.wide .record{ border-left-color:var(--accent); }   /* persistent mode keeps the spine */
/* header bar: faint blue crown to cap the panel */
.rec-bar{ background:var(--accent-softer); }
.rec-inline .rec-bar{ background:var(--paper-3); }         /* keep the inline header as-is */
/* restore the hero amount's focal pop — was --brass-dim → dulled to --muted */
.rec-amt{ color:var(--accent); }

/* ════════════════════════════════════════════════════════════════════
   AGENCY MAGNITUDE BAR — sharpen the "glow" into an intentional bar
   Shell ships .row-mag as a full-width brass→transparent gradient, which
   reads as a smudge. Flatten it to a quiet accent tint that holds for most
   of its (magnitude-proportional) width and fades only at the tail, so it
   registers as a bar. To drop the feature entirely: display:none here.
   ════════════════════════════════════════════════════════════════════ */
.row-mag{ background:linear-gradient(90deg,var(--accent-soft) 0,var(--accent-soft) 82%,transparent 100%); }

/* ════════════════════════════════════════════════════════════════════
   PALETTE-MATCHED SCROLLBARS
   ════════════════════════════════════════════════════════════════════ */
*{ scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{
  background:var(--line-strong); border-radius:7px;
  border:3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover{ background:var(--muted-2); }
::-webkit-scrollbar-track{ background:transparent; }