/* The Playbook look for the legacy static pages: the how-it-works doc and the
   404. Loaded AFTER style.css, and it only redefines style.css's own tokens
   (plus a few type rules), so every rule in style.css and every page-local
   <style> block restyles itself without being rewritten. Written against the
   site's `--pr-*` tokens in web/src/index.css; move them together.

   (The file keeps the name it had in the Volt look so no page's <link> has to
   move.)

   Both themes, like the site: paper by default under a light preference,
   chalkboard under a dark one, and theme.js stamps data-v3-theme with the
   reader's own choice before anything paints, which wins over the media
   query.

   The privacy policy and the terms are NOT styled by this: they are rendered
   from the site's own Legal component at build time (see
   web/scripts/prerender.mjs) and take the real Tailwind build. */

/* The faces, self-hosted. web/src/index.css declares the same files for
   everything built by Vite; these pages load style.css rather than that
   build, so they need their own copy. Keep the files in step with it. */
@font-face {
  font-family: 'Archivo Playbook';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-wdth-variable-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/hanken-grotesk-variable-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}

/* Chalkboard: the dark theme. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"],
:root[data-v3-theme="dark"] {
  --font-display: 'Archivo Playbook', Archivo, "Arial Black", sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;

  /* Grounds, darkest to lightest. */
  --page: #13161E;
  --sunken: #13161E;
  --card: #20232E;
  --well: #191C25;
  --fill: #191C25;
  --fill-hi: #262A36;
  --track: #262A36;
  --board-hd: #191C25;
  --elev-1: none;
  --elev-2: none;
  --elev-3: 0 24px 60px rgba(0, 0, 0, 0.5);
  --elev-4: 0 24px 60px rgba(0, 0, 0, 0.5);
  --elev-up: none;

  /* Inks. Muted clears 4.5:1 on every ground here. */
  --ink: #F4EEE2;
  --ink-mid: #D6D0C4;
  --ink-light: #BAB5AA;
  --line: rgba(244, 238, 226, 0.14);
  --hairline: rgba(244, 238, 226, 0.14);

  /* The text-safe orange is the link; the primary action is solid ink with
     the highlighter offset under it, as on the site. --teal is the
     first-down line across the header, which is the highlighter itself. */
  --link: #FE9D4A;
  --teal: #FFA146;
  --teal-ink: #FE9D4A;
  --teal-cta: #F4EEE2;
  --teal-cta-ink: #13161E;
  --teal-cta-hover: #D6D0C4;
  --blue: #FE9D4A;
  --cyan: #FFA146;

  /* The header band. */
  --navy: #13161E;
  --navy-deep: #13161E;
  --navy-mid: #191C25;
  --navy-lift: #191C25;
  --navy-soft: #191C25;
  --navy-glow: #191C25;
  --mark-ink: #F4EEE2;
}

/* Paper: the light theme. A system preference counts only when the reader
   has not chosen (theme.js always stamps the choice, so the media query is
   the fallback for a page loaded without it). */
@media (prefers-color-scheme: light) {
  :root:not([data-v3-theme="dark"]) {
    --page: #F4EEE2; --sunken: #F4EEE2; --card: #FDFBF6; --well: #F9F5ED; --fill: #F9F5ED;
    --fill-hi: #EDE6D8; --track: #EDE6D8; --board-hd: #F9F5ED;
    --elev-3: 0 24px 60px rgba(19, 22, 30, 0.18); --elev-4: 0 24px 60px rgba(19, 22, 30, 0.18);
    --ink: #13161E; --ink-mid: #343742; --ink-light: #60626A;
    --line: rgba(19, 22, 30, 0.15); --hairline: rgba(19, 22, 30, 0.15);
    --link: #A94700; --teal-ink: #A94700; --blue: #A94700;
    --teal-cta: #13161E; --teal-cta-ink: #F4EEE2; --teal-cta-hover: #343742;
    --navy: #F4EEE2; --navy-deep: #F4EEE2; --navy-mid: #F9F5ED; --navy-lift: #F9F5ED;
    --navy-soft: #F9F5ED; --navy-glow: #F9F5ED; --mark-ink: #13161E;
  }
}
:root[data-v3-theme="light"] {
  --page: #F4EEE2; --sunken: #F4EEE2; --card: #FDFBF6; --well: #F9F5ED; --fill: #F9F5ED;
  --fill-hi: #EDE6D8; --track: #EDE6D8; --board-hd: #F9F5ED;
  --elev-3: 0 24px 60px rgba(19, 22, 30, 0.18); --elev-4: 0 24px 60px rgba(19, 22, 30, 0.18);
  --ink: #13161E; --ink-mid: #343742; --ink-light: #60626A;
  --line: rgba(19, 22, 30, 0.15); --hairline: rgba(19, 22, 30, 0.15);
  --link: #A94700; --teal-ink: #A94700; --blue: #A94700;
  --teal-cta: #13161E; --teal-cta-ink: #F4EEE2; --teal-cta-hover: #343742;
  --navy: #F4EEE2; --navy-deep: #F4EEE2; --navy-mid: #F9F5ED; --navy-lift: #F9F5ED;
  --navy-soft: #F9F5ED; --navy-glow: #F9F5ED; --mark-ink: #13161E;
}

html, body { background: var(--page); }

/* Play-call headings: wide Archivo at weight 900, in capitals. */
.doc h2,
.doc-head h1,
.nf h1,
.nf-code {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}
.appbar { border-bottom: 1px solid var(--line); }
::selection { background: #FFA146; color: #13161E; }

/* The wordmark: an <img> per ground, shown by theme, because an <img>
   cannot take a colour from the page. */
.wm-paper { display: inline-block; }
.wm-ink { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-v3-theme="dark"]) .wm-paper { display: none; }
  :root:not([data-v3-theme="dark"]) .wm-ink { display: inline-block; }
}
:root[data-v3-theme="light"] .wm-paper { display: none; }
:root[data-v3-theme="light"] .wm-ink { display: inline-block; }