/* ---- v4 bridge: legacy pages, light theme ------------------------------------------------
   These pages carry their own components under old token names. Rather than rewrite 30 classes
   and risk the account/sign-in JS, the tokens are remapped here onto v4's paper and ink, and a
   few component rules are softened so they sit on cream instead of near-black. */
:root{
  --paper:#f6f5f2; --paper-sunk:#fcfbf8; --card:#fcfbf8;
  --ink:#1c1b19; --ink-2:#3a3833; --ink-3:#69655e;
  --line:#dedad3; --line-soft:#e7e1d6;
  --oxblood:#1c1b19; --oxblood-2:#3a3833; --gold:#69655e;
  --ok:#5f6b5b;
  --term-bg:#1c1b19; --term-fg:#f6f5f2; --term-dim:#b6b0a4;
  --shadow-1:0 1px 2px rgba(28,27,25,.05);
}
body{background:var(--paper);color:var(--ink);font-family:var(--serif)}
.gbtn{background:#fcfbf8;color:var(--ink);border:1px solid var(--line)}
.gbtn:hover{border-color:var(--ink)}
.btn-primary{background:var(--ink);color:#fcfbf8;border-color:var(--ink)}
.btn-quiet{border:1px solid var(--line2);color:var(--ink);background:transparent}
.btn-quiet:hover{border-color:var(--ink)}
.card{background:var(--card);border:1px solid var(--line);box-shadow:none}
.keybox{background:var(--paper-sunk);border:1px solid var(--line)}
pre{background:var(--term-bg);color:var(--term-fg)}
.tag{background:var(--paper-sunk);border:1px solid var(--line);color:var(--ink-2)}
.fine,.hint,.sub,.foot-note{color:var(--ink-3)}
.alert{background:#fbf1ef;border:1px solid #e7cfc9;color:#7a2e22}

/* the browser's own chrome: without this the scrollbar stays dark on a cream page */
:root{color-scheme:light}

/* a card needs a surface, not just a border, to lift off cream */
.card{background:#ffffff;border:1px solid var(--line2)}

/* the legal pages had no container at all, so the measure ran edge to edge */
main.legal{max-width:760px;margin:0 auto;padding:72px 24px 96px}
main.legal > h1{font-size:clamp(38px,5vw,56px);line-height:1.06;margin:0 0 18px}
main.legal > .sub{font-size:19px;color:var(--mid);margin:0 0 10px;max-width:56ch}
main.legal .updated{display:inline-block;margin:6px 0 34px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
main.legal h2{font-size:26px;line-height:1.2;margin:52px 0 14px}
main.legal p{font-size:19px;line-height:1.66;color:var(--ink2);margin:0 0 16px}
main.legal ul{margin:0 0 18px;padding-left:22px}
main.legal li{font-size:18.5px;line-height:1.6;color:var(--ink2);margin:0 0 12px}
main.legal .callout{border-left:3px solid var(--ink);background:#ffffff;padding:20px 22px;margin:26px 0;
  border-radius:0 12px 12px 0;color:var(--ink2);font-size:17.5px;line-height:1.6}
main.legal a{color:var(--ink);text-underline-offset:3px}
main.legal .fine{color:var(--soft)!important}

/* separators and micro-copy that read as invisible on cream */
.gbtn + .fine, .emailrow + .fine{color:var(--mid)!important}

/* ---- second legacy family: books/, gifts/, ideas/, compare/ ---------------------------------
   These pages name their tokens differently (--bg / --text / --amber) and set Fraunces as the
   serif. Remapped onto v4's paper and ink, with the amber pulled down far enough to stay legible
   on cream while keeping the warm accent. */
:root{
  --bg:#f6f5f2; --bg-2:#fcfbf8; --card:#ffffff;
  --line:#dedad3; --line-hi:#cfcac1;
  --ink:#1c1b19; --text:#2f2d28; --text-2:#4a4740; --text-3:#6b6660;
  --amber:#8a5a24; --ember:#8a3b1e; --ok:#4f6b4c;
  --serif:"Hyacinth","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
body{font-family:var(--sans)}
h1,h2,h3,.serif{font-family:var(--serif)}

/* ---- third family: the signed-in app shell (--surface / --ember / --plum) -------------------
   The books area kept its own dark palette and its own signed-in header (name + picture). The
   header is kept — it carries the account controls — but everything under it moves to paper. */
:root{
  --surface:#ffffff!important; --surface-2:#fcfbf8!important;
  --line-2:#cfcac1!important;
  --ember:#8a3b1e!important; --ember-2:#8a5a24!important; --gold:#69655e!important; --plum:#4a4740!important;
}
.glow,.g2{display:none!important}

/* the shell's sticky header hardcodes its own near-black — the one rule tokens cannot fix */
header.top{background:rgba(246,245,242,.88);border-bottom:1px solid var(--line)}
header.top .brand .name{color:var(--ink)}

/* Buttons are NOT remapped here. This block used to force `.btn{color:#fcfbf8!important}`, and
   because the bridge loads AFTER the app shell's own <style>, that "!important" beat every
   variant rule in the shell: a ghost button kept its pale fill and took a near-white label, so
   "Browse the Shelf" and "My books" rendered as an unreadable paper-on-paper pill (measured
   1.0:1). The shell pins .btn / .btn-ghost / .btn--quiet itself, so the bridge leaves them alone. */

/* the shell also paints a few surfaces by hand; pin them so nothing slips back to dark */
body{background:#f6f5f2!important;color:#1c1b19!important}
header.top{background:rgba(246,245,242,.92)!important;border-bottom:1px solid #dedad3!important}
.toast{background:#1c1b19!important;color:#f6f5f2!important}