/* Type primitives — salamcendekia-blog
 *
 * THE FAMILIES ARE TAKEN FROM THE LANDING PAGES. THE SIZES ARE NOT.
 *
 * Poppins 800 for headings at 1.15 leading, Nunito for body at 1.6, is exactly
 * what `landing-a/page.html` sets. Those carry the brand voice and are adopted
 * unchanged.
 *
 * The SIZES could not be, and it is worth recording why rather than leaving a
 * future reader to assume they were copied.
 *
 * Measured across the landing page: fixed `font-size` values cluster at 11-17px
 * (15 uses at 14px, 14 at 13px, 12 at 12px) and everything expressive is a
 * `clamp()` reaching 44-64px. That is a marketing page's distribution — small
 * UI labels and large headlines, with nothing between them doing sustained
 * reading.
 *
 * A blog article is sustained reading. It needs a body size a person can read
 * for eight hundred words without effort, which is 18-20px, and the landing
 * page has no such size to borrow. So the scale below is designed, using the
 * landing page as evidence of VOICE and the reading task as the constraint on
 * SIZE.
 *
 * `systems/base` was checked first and does not serve: its body is 14px and its
 * hero is 30px, a dense application scale for tables and forms. Rendering an
 * article in it would set prose at the size of a table cell.
 *
 * EVERY SIZE CARRIES THE LEADING IT WAS DESIGNED WITH, following the same rule
 * `systems/base` states: a size adopted without its leading is the most common
 * way a type scale stops being one. Leading loosens as size drops, which is the
 * opposite of the display end and correct for reading.
 */

/* THE FACES, SELF-HOSTED -- matching `systems/base`, which binds these same
   three files from `brand/font/`.

   THIS FILE NAMED THE FAMILIES AND SHIPPED NO `@font-face` FOR FOUR EPICS, and
   the omission was invisible because a missing webfont has no error state: the
   stack falls through to `system-ui` and the page renders, with every check
   green.

   THE REAL COST WAS NOT "THE WRONG FONT", IT WAS "A DIFFERENT FONT PER
   MACHINE". `system-ui` resolves to whatever the renderer has, and those
   substitutes have different metrics. #108 merged a page that measured 305px
   locally and 339px on CI, failing `states.mjs` at 320 -- the same bytes, two
   answers, because neither machine had Poppins and they disagreed about the
   replacement. Binding the face is what makes the measurement reproducible.

   Found by BLOG-5.6: the WordPress theme self-hosted these faces, and the real
   Poppins is WIDER than the fallback -- enough that an article title that
   measured 256px here rendered 275px there and pushed the page past 320.
   `document.fonts` on this repository's own rendered pages returns an empty
   list, which is the shortest proof.

   `font-display: swap` -- text renders immediately in the fallback and
   re-renders when the face arrives. `block` would leave a design blank while a
   screenshot is taken.

   Nunito is variable across 400-700, so one file serves both the regular body
   and the semibold lead. Poppins is needed at 800 only: no role in this system
   asks for 700, and `brand/font/poppins-700.woff2` is deliberately not linked. */

@font-face {
  font-family: "Nunito";
  src: url("../../../../brand/font/nunito-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../../../../brand/font/poppins-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Families — from the landing pages, unchanged. */
  --font-primary: "Poppins", system-ui, -apple-system, sans-serif;
  --font-secondary: "Nunito", system-ui, -apple-system, sans-serif;

  /* Reading sizes.
     `--type-prose` is the one everything else is calibrated against: 19px is
     within the 18-20px range that reads comfortably at arm's length, and 1.65
     leading gives descenders room without the lines drifting apart. */
  --type-caption: 0.875rem;        /* 14px — bylines, figure captions */
  --type-caption-leading: 1.375rem; /* 22px — ratio 1.57 */

  --type-small: 1rem;              /* 16px — UI chrome, nav, footer */
  --type-small-leading: 1.5rem;    /* 24px — ratio 1.50 */

  --type-prose: 1.1875rem;         /* 19px — ARTICLE BODY */
  --type-prose-leading: 1.9375rem; /* 31px — ratio 1.63 */

  --type-lead: 1.375rem;           /* 22px — standfirst, the opening paragraph */
  --type-lead-leading: 2.125rem;   /* 34px — ratio 1.55 */

  /* Headings. The step from --type-prose to --type-h3 is deliberately small:
     an H3 inside an article should read as a heading without shouting. */
  --type-h3: 1.375rem;             /* 22px */
  --type-h3-leading: 1.75rem;      /* 28px — ratio 1.27 */

  --type-h2: 1.75rem;              /* 28px */
  --type-h2-leading: 2.125rem;     /* 34px — ratio 1.21 */

  --type-h1: 2.5rem;               /* 40px — the article title */
  --type-h1-leading: 2.875rem;     /* 46px — ratio 1.15, the landing page's */

  --type-display: 3.25rem;         /* 52px — index page mastheads only */
  --type-display-leading: 3.5rem;  /* 56px — ratio 1.08 */

  /* Weights. The landing page uses 800 for headings and 400 for body; 600 is
     added for the two places between them — nav links and a lead paragraph's
     emphasis — which the page achieves with colour instead. */
  --type-weight-regular: 400;
  --type-weight-semibold: 600;
  --type-weight-extrabold: 800;

  /* Measure. 65-75 characters is the readability range; 68ch sits mid-range at
     --type-prose. Declared as a token because the article container and any
     pull-quote must agree on it. */
  --type-measure: 68ch;
}