/* css/typography.css */

/* ── SELF-HOSTED FONTS (BRI-5394) ────────────────────────────────────────────
 * These two families used to load from the Google Fonts CDN via @import. The families were
 * always DECLARED correctly, so nothing looked wrong in code review — but when the CDN was
 * slow or blocked, the page fell back to Georgia / system with nothing failing and nothing
 * logged. That silent degradation is what Stephan hit in QA as "the wrong font".
 *
 * Self-hosting removes the third party entirely. The files are served from our own origin, so
 * they cannot be blocked independently of the page itself.
 *
 * 🔴 THIS FILE IS SITE-WIDE. Every marketing page links it, not just the Spec Builder. So the
 *    self-hosted faces must cover every weight the deleted @import requested (Spline Sans
 *    400/500/600/700 and Piazzolla 900) or unrelated pages regress. A weight that is declared
 *    but not hosted does NOT fall back to Georgia — the browser synthesises it (faux bold),
 *    which is subtler and still off-brand.
 *
 * 🔴 font-display: swap, never `optional`. `optional` permits the browser to skip the webfont
 *    entirely on a slow first load, which would REINTRODUCE the exact silent-fallback bug this
 *    change exists to remove.
 *
 * Spline Sans is a VARIABLE font: Google serves one file per subset covering the whole
 * 300-700 range, so `font-weight: 300 700` here is one file doing the work of four statics.
 *
 * The unicode-range values are copied verbatim from Google's own css2 response. Preserve every
 * subset that response served: dropping Greek, Cyrillic, or Vietnamese would make those headings
 * silently fall back even though the family and weight declarations still look correct.
 *
 * Licence: both families are SIL Open Font License 1.1 — see assets/fonts/OFL.txt.
 * tests/spec-seam-guards.test.mjs asserts every file promised below EXISTS in the repo; an
 * @font-face pointing at a missing file degrades exactly as silently as the CDN did.
 * ─────────────────────────────────────────────────────────────────────────── */

/* latin-ext */
@font-face {
  font-family: "Spline Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/spline-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Spline Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/spline-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: Piazzolla;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/piazzolla-900-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: Piazzolla;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/piazzolla-900-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: Piazzolla;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/piazzolla-900-greek-ext.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: Piazzolla;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/piazzolla-900-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* vietnamese */
@font-face {
  font-family: Piazzolla;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/piazzolla-900-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: Piazzolla;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/piazzolla-900-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: Piazzolla;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/piazzolla-900-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-family-sans: "Spline Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-family-headers: "Piazzolla", Georgia, serif;

  /* The small end of the scale. Both were referenced by stylesheets long before they were
     defined (BRI-5391): css/book-demo.css and css/legal.css call --font-size-xs with no
     fallback, so that text was rendering at the inherited size. 0.75rem is not a new choice,
     it is the fallback css/spec-building.css already carries, kept byte-identical so the
     Spec Builder funnel does not move. */
  --font-size-2xs: 0.6875rem; /* 11px */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-base: 1rem; /* 16px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem; /* 36px */
  --font-size-4-5xl: 2.5rem; /* 40px */
  --font-size-5xl: 3rem; /* 48px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --line-height-normal: 1.5;
  --line-height-snug: 1.375;
  --line-height-tight: 1.25;
}

body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: var(--line-height-normal);
}

h1,
h2,
h3 {
  line-height: var(--line-height-tight);
  margin: 0;
}

h1 {
  font-size: var(--font-size-4xl);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold);
}

h2 {
  font-size: var(--font-size-3xl);
  font-family: var(--font-family-headers);
  font-weight: var(--font-weight-black);
}

h3 {
  font-size: var(--font-size-xl);
  font-family: var(--font-family-headers);
  font-weight: var(--font-weight-black);
}

/* Desktop heading scale (moved from main.css's DESKTOP STYLES block). */
@media (min-width: 900px) {
  h1 {
    font-size: var(--font-size-5xl);
  }

  h2 {
    font-size: var(--font-size-4-5xl);
  }
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}