/* The Volt 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 two type rules), so every rule in style.css and every page-local
   <style> block restyles itself without being rewritten. Written against
   the prototype's `pr` tokens in web/tailwind.config.js; move them together.

   Dark in both themes on purpose. The site is dark-only in this look, and
   theme.js still stamps data-theme="light" on a reader who chose it on the
   old site, so the light block is overridden too rather than left to paint
   a light page behind dark-ground text.

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

/* The two faces, self-hosted. web/src/index.css declares the same two
   against 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 and weight ranges in step with it. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/oswald-variable-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-variable-latin.woff2') format('woff2');
}

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --font-display: Oswald, "Arial Narrow", sans-serif;
  --font-body: Inter, system-ui, sans-serif;

  /* Grounds, darkest to lightest. */
  --page: #0B0D0B;
  --sunken: #0B0D0B;
  --card: #151714;
  --well: #1D201C;
  --fill: #1D201C;
  --fill-hi: #262A25;
  --track: #262A25;
  --board-hd: #151714;
  --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 is the prototype's #8A8F86: 5.6:1 on the page and 4.9 on a
     well, so it clears 4.5 on every ground here. */
  --ink: #F5F7F2;
  --ink-mid: #C4C8BE;
  --ink-light: #8A8F86;
  --line: rgba(255, 255, 255, 0.09);
  --hairline: rgba(255, 255, 255, 0.09);

  /* Volt is the action and the link. On these dark grounds it is 16:1 as
     text, so unlike gold it may be type; anything drawn ON it takes the
     page colour. */
  --link: #D4FF3D;
  --teal: #D4FF3D;
  --teal-ink: #D4FF3D;
  --teal-cta: #D4FF3D;
  --teal-cta-ink: #0B0D0B;
  --teal-cta-hover: #E3FF7A;
  --blue: #D4FF3D;
  --cyan: #D4FF3D;

  /* The header band and the mark. */
  --navy: #0B0D0B;
  --navy-deep: #0B0D0B;
  --navy-mid: #151714;
  --navy-lift: #151714;
  --navy-soft: #151714;
  --navy-glow: #151714;
  --mark-ink: #F5F7F2;
}

html, body { background: #0B0D0B; }

/* The prototype sets its headings in Oswald capitals. */
.doc h2,
.doc-head h1,
.nf h1,
.nf-code {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.appbar { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
::selection { background: #D4FF3D; color: #0B0D0B; }