/* ==========================================================================
   Design tokens shared by the MkDocs documentation and the Astro marketing
   pages: the Field Notes faces and palette, the product's own faces, and the
   Ember product tokens. Loaded before every other stylesheet.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/fraunces.woff2") format("woff2");
}
/* The product wordmark's own face, and nothing else's. docs/brand-identity.md
   sets `Pledgivo` in Bricolage Grotesque 800 with `ivo` in Ember, and the
   masthead is the one place on this site where the product's identity outranks
   the Field Notes type system. Subset to the eight glyphs of the word — 2 KB,
   against 39 KB for the full latin cut — so it costs the page essentially
   nothing and can never be reached for as a general display face. SIL OFL 1.1;
   see assets/fonts/LICENSES.md. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/bricolage800.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/plexsans.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/plexmono400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/plexmono500.woff2") format("woff2");
}

:root {
  /* Swiss. Neutral paper, true black, and exactly one chromatic colour: a
     single printer's red, used sparingly enough that it still means something.
     The second axis is not a second hue but weight — black carries what a
     generator produced (layer tags, domain rules, entry identity), red carries
     what a person decided (active nav, section ticks, the current heading).
     Danger is therefore separated from the accent by depth and border weight
     rather than by hue, which is the only way to keep one red meaningful. */
  --fn-paper: #efefec;
  --fn-paper-dim: #e4e4e0;
  --fn-panel: #ffffff;
  --fn-ink: #0b0b0b;
  --fn-ink-soft: #494949;
  --fn-ink-faint: #8a8a86;
  --fn-line: #d3d3ce;
  --fn-line-soft: #e3e3de;
  --fn-accent: #d0021b;
  --fn-accent-ink: #a80217;
  --fn-accent-soft: #fbe9eb;
  --fn-accent-soft-line: #efb3bb;
  --fn-warn: #8a6a00;
  --fn-warn-soft: #f4eed8;
  --fn-warn-line: #ddcd9c;
  --fn-danger: #6f0411;
  --fn-danger-soft: #f2e2e4;
  --fn-danger-line: #cfa4ab;
  /* The neutral axis — everything a generator emitted rather than a person. */
  --fn-gen: #0b0b0b;
  --fn-gen-soft: #e9e9e5;
  --fn-gen-line: #b8b8b3;
  --fn-radius: 10px;
  --fn-shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 10px 24px -14px rgba(11, 11, 11, 0.16);
  --fn-shadow-pop: 0 18px 44px -18px rgba(11, 11, 11, 0.34);
  --fn-font-display: "Fraunces", Georgia, "Iowan Old Style", serif;
  --fn-font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --fn-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The product's own faces. Used on marketing pages only where the page draws
   the product (the donation form in the hero), never for the site's own text.
   The variable Bricolage is a separate family from the wordmark subset above:
   sharing the name would make a weight-800 request match both, and the later
   declaration would win and pull the 41 KB file in place of the 2 KB subset. */
@font-face {
  font-family: "Bricolage Grotesque Variable";
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/bricolage-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/hanken-var-latin.woff2") format("woff2");
}

:root {
  /* Ink-band surfaces: the dark sections on marketing pages and the footer. */
  --fn-ink-line: #2c2c2a;
  --fn-ink-line-strong: #4a4a46;
  --fn-ink-raised: #121211;
  --fn-on-ink: #f2f1ec;
  --fn-on-ink-soft: #b9b9b2;
  --fn-on-ink-accent: #ff6b7d;
  /* The faintest red wash, for the column a comparison table argues for. */
  --fn-accent-wash: #fffafa;
  --fn-font-brand: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --fn-font-product: "Hanken Grotesk", system-ui, sans-serif;
  /* Product depictions only (the hero donation form). --fn-font-brand above is
     the 800-weight wordmark subset; this one is the full variable face. */
  --fn-font-product-display: "Bricolage Grotesque Variable", "Hanken Grotesk", system-ui, sans-serif;

  /* Ember: the product brand (docs/brand-identity.md). Only inside depictions
     of the product, such as the hero's donation form. Never for site chrome. */
  --em-primary: #e0533d;
  --em-primary-dark: #c4432f;
  --em-midnight: #1c2b46;
  --em-gold: #f2b705;
  --em-blush: #fdf3ee;
  --em-line: #f1d9cf;
  --em-chip: #f5e4dc;
  --em-ink-soft: #6b5a55;
  --em-ink-faint: #8a6c62;
  --ok: #1d6b45;
}