/* PaperBoy themes (14 Nov 2026, look/DESIGN.md sections 2, 2a, 3). Normal is the default for everyone.
   <html data-theme="normal|calm|night"> is set before first paint by paperboy-theme.js (load it in <head>, before
   any stylesheet that paints). Tools use only these tokens for colour, never their own hex values.
   Red text (a status word, an error) uses --pb-red-text, which is lighter in Night for contrast; the red button stays --pb-red.
   Content (previews, documents, invoices, menus, slides, designs) stays light paper in every theme: use --pb-sheet. */
:root,:root[data-theme="normal"]{
  --pb-ground:#f7efe3;--pb-surface:#fffaf2;--pb-well:#efe4d2;--pb-sheet:#ffffff;
  --pb-ink:#1b243a;--pb-ink-2:#5a6072;--pb-line:rgba(27,36,58,.12);
  --pb-column:#1b243a;--pb-column-ink:#fbf2e4;
  --pb-red:#c8321f;--pb-red-2:#a8281a;--pb-red-text:#a8281a;--pb-green:#1f7a4d;--pb-focus:#d9a441;
  --pb-display:Fraunces,'Fraunces Fallback',Georgia,serif;--pb-display-weight:600;--pb-display-track:-.015em;
  --pb-text:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --pb-shadow-1:0 1px 0 rgba(27,36,58,.05),0 12px 28px -18px rgba(27,36,58,.32);
  --pb-shadow-2:0 2px 0 rgba(27,36,58,.06),0 22px 40px -20px rgba(27,36,58,.42);
  color-scheme:light}
:root[data-theme="calm"]{
  --pb-ground:#f5f4f1;--pb-surface:#ffffff;--pb-well:#ecebe7;--pb-sheet:#ffffff;
  --pb-ink:#16181d;--pb-ink-2:#5f636c;--pb-line:rgba(22,24,29,.09);
  --pb-column:#ffffff;--pb-column-ink:#16181d;
  --pb-display:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--pb-display-weight:600;--pb-display-track:-.035em;
  --pb-shadow-1:0 1px 0 rgba(22,24,29,.04),0 10px 24px -18px rgba(22,24,29,.22);
  --pb-shadow-2:0 2px 0 rgba(22,24,29,.05),0 20px 36px -20px rgba(22,24,29,.3);
  color-scheme:light}
:root[data-theme="night"]{
  --pb-ground:#121827;--pb-surface:#1b2336;--pb-well:#232c42;--pb-sheet:#fffdf8;
  --pb-ink:#f3ead9;--pb-ink-2:#9aa1b4;--pb-line:rgba(243,234,217,.10);
  --pb-column:#0c111d;--pb-column-ink:#f3ead9;--pb-display-weight:500;--pb-red-text:#ff8f7a;
  --pb-shadow-1:0 1px 0 rgba(0,0,0,.25),0 12px 28px -16px rgba(0,0,0,.6);
  --pb-shadow-2:0 2px 0 rgba(0,0,0,.3),0 22px 40px -18px rgba(0,0,0,.7);
  color-scheme:dark}
html[data-theme]{background:var(--pb-ground);color:var(--pb-ink)}
/* switching is a short cross-fade of the whole page, never a layout change */
html.pb-theme-fading{transition:none}
html.pb-theme-fading body{animation:pb-theme-fade 200ms ease-out}
@keyframes pb-theme-fade{from{opacity:.86}to{opacity:1}}
@media (prefers-reduced-motion:reduce){html.pb-theme-fading body{animation:none}}
/* The PaperBoy head on a column (look rule 2a): cream on navy/dark, ink on Calm's white column.
   Put both pictures in: <img class="pb-head--cream" src="head-cream.png"><img class="pb-head--ink" src="head-ink.png">
   (both in platform/look/shell/img). */
.pb-head--ink{display:none}
html[data-theme="calm"] .pb-head--cream{display:none}
html[data-theme="calm"] .pb-head--ink{display:revert}