/* The Pass — shared theme (Phase A: tokens + fonts + button styles + dark mode, nothing else).
   Source of truth: the approved mockup (Nick, 2026-10-26, "look 1"),
   ~/agents/context/guided-setup/guided-setup.html — its :root block is reproduced EXACTLY below, light and
   dark. Every page that wants The Pass look links this ONE file; nothing here is duplicated per page.

   console.html (SPEC-self-serve-onboarding-login-9's "Editorial" purple system) used a different set of
   token NAMES for the same roles (--panel, --deep, --dim, --hair, --wash, --soft, --mid, --ink2, --mono,
   --sans, --serif, --pass/--pass-bg, --block/--block-bg/--block-wash/--block-line, --warn/--warn-bg,
   --info, --radius). Rather than rewrite ~500 call sites that already read those names, the alias block
   below repoints every one of them at the canonical palette so the whole surface re-skins from here. The
   only call sites touched by hand are the handful that used --deep as a SOLID BUTTON FILL (headline color
   and button-fill were the same old purple; they are not the same new color — ink is near-black, the
   button fill is the accent rust) — console.html edits those directly. */

@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 600;font-display:swap;src:url('/fonts/fraunces-latin.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/instrument-sans-latin.woff2') format('woff2')}

:root{
  /* canonical tokens, exact values from the approved mockup */
  --bg:#F6F2EA; --surface:#FFFFFF; --sunk:#F1EBDF; --ink:#1B1A17; --ink-2:#3F3B34; --muted:#5C574E; --faint:#9C9384;
  --line:#E3DCCF; --line-soft:#EFE9DD; --control:#8F8676;
  --bar:#1B1A17; --on-bar:#F6F2EA; --on-bar-2:#BDB4A4; --bar-raised:#2A2722;
  --accent:#B4531F; --accent-ink:#8E3A12; --accent-soft:#F7E3D6; --on-accent:#FFFFFF;
  --ok:#1F6B45; --ok-soft:#E3F0E8;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --ui:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* warn (amber), the one status role the mockup's own guided-setup screens never needed: kept in the
     same warm-neutral family as the rest of the palette, re-tuned per theme for >=4.5:1 contrast. */
  --warn-ink:#7C611F; --warn-soft:#F3EDDC;

  /* console.html's existing token names, repointed at the palette above (see file header) */
  --panel:var(--surface); --panel2:var(--sunk); --dim:var(--muted); --mid:var(--faint); --soft:var(--control);
  --wash:var(--accent-soft); --hair:var(--line-soft); --ink2:var(--ink-2); --deep:var(--ink);
  --pass:var(--ok); --pass-bg:var(--ok-soft);
  --block:var(--accent-ink); --block-bg:var(--accent-soft); --block-wash:var(--accent-soft); --block-line:var(--accent-ink);
  --warn:var(--warn-ink); --warn-bg:var(--warn-soft);
  --info:var(--accent);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:var(--ui); --serif:var(--display);
  --radius:0px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#151310; --surface:#1E1B17; --sunk:#26221D; --ink:#F1EBDF; --ink-2:#D8D0C2; --muted:#A79D8D; --faint:#7D7466;
  --line:#3F3A32; --line-soft:#2C2823; --control:#A79D8D;
  --bar:#0E0D0B; --on-bar:#F1EBDF; --on-bar-2:#A79D8D; --bar-raised:#221F1B;
  --accent:#E0814A; --accent-ink:#F0A97E; --accent-soft:#3A2419; --on-accent:#1B1A17;
  --ok:#7FD1A0; --ok-soft:#16291E;
  --warn-ink:#D9BE75; --warn-soft:#352C18;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#151310; --surface:#1E1B17; --sunk:#26221D; --ink:#F1EBDF; --ink-2:#D8D0C2; --muted:#A79D8D; --faint:#7D7466;
  --line:#3F3A32; --line-soft:#2C2823; --control:#A79D8D;
  --bar:#0E0D0B; --on-bar:#F1EBDF; --on-bar-2:#A79D8D; --bar-raised:#221F1B;
  --accent:#E0814A; --accent-ink:#F0A97E; --accent-soft:#3A2419; --on-accent:#1B1A17;
  --ok:#7FD1A0; --ok-soft:#16291E;
  --warn-ink:#D9BE75; --warn-soft:#352C18;
  color-scheme:dark;
}

/* The one button shape every console surface uses: a solid accent primary, a ghost secondary. Pages that
   already ship their own `button`/`.btn` rules (console.html) keep their own shape/sizing; this just gives
   a `.btn`/`.btn.ghost` pair to pages (console-auth) that style buttons from nothing but this file. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);border-radius:10px;font:600 1rem var(--ui);padding:0 22px;min-height:48px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--control)}
.btn.ghost:hover{background:var(--line-soft)}