/* Design tokens and the self-hosted typefaces.
 *
 * Self-hosted, not loaded from Google Fonts, and that is a product decision
 * rather than a performance one: a document arguing that our data should not be
 * handed to third parties cannot ship a page that hands every reader's IP
 * address to one. The CSP in `_headers` pins font-src to 'self', so an
 * off-origin @font-face fails loudly instead of quietly working.
 *
 * All three faces are SIL Open Font License 1.1.
 */

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-variable-italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/source-serif-4-variable.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/source-serif-4-variable-italic.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-variable.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paper and ink. The whole system is a printed document: cream stock, dark
     brown ink rather than black, one red for the seal. */
  --paper: #f2ebdd;
  --paper-deep: #ebe2d0;
  --ink: #14110e;
  --ink-soft: #3a332c;
  --ink-muted: #7a6f60;
  --hairline: #c9bea8;
  --seal: #8b1a1a;
  --seal-deep: #6b1313;
  --seal-soft: rgba(139, 26, 26, 0.08);

  --serif-display: 'Fraunces', Georgia, serif;
  --serif-body: 'Source Serif 4', Georgia, serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Reading measure. The document is meant to be read start to finish, so the
     column stays narrow even on a wide display. Two steps rather than one:
     38rem keeps the page floating on paper down to a tablet, and main.css swaps
     in the wide measure past 1000px so a desktop is not handed the tablet
     column. Both sit inside the comfortable 60 to 70 characters a line. */
  --measure: 38rem;
  --measure-wide: 42rem;
}