/* The type system for the static pages.
 *
 * The guide/practice/creator/academy pages don't run Tailwind, so the nine size
 * tokens are declared here as plain custom properties plus one utility class
 * each. Values are byte-for-byte the same scale as tailwind.config.js
 * `fontSize` and styles/typography.ts — if you change one, change all three.
 *
 * Self-contained on purpose: one stylesheet plus one font preload is the whole
 * type cost of an indexed page. The @font-face below is the same declaration as
 * public/fonts/fonts.css — KEEP IN SYNC (fonts.css serves the SPA, which loads
 * its CSS through Vite; these pages are hand-authored HTML).
 *
 * Never add a font-CDN <link> or @import to a page that ships here: a
 * cross-origin font hop costs LCP on exactly the pages we want fast, and
 * tests/designFingerprints.test.ts fails the build if one appears.
 */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/fonts/archivo-variable-latin.woff2') format('woff2-variations');
  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+2190-2193, U+2212, U+2215, U+2264-2265, U+FEFF, U+FFFD;
}

:root {
  /* Mobile values. The four largest step up at 640px, below. body, body-sm,
     label and data-sm hold their size everywhere — reading text never shrinks
     on a phone and 11px labels are already at the floor. */
  --type-display-xl: 2.25rem;   /* 36 -> 60 */
  --type-display:    1.625rem;  /* 26 -> 36 */
  --type-title:      1.125rem;  /* 18 -> 20 */
  --type-body:       1rem;      /* 16 */
  --type-body-sm:    0.8125rem; /* 13 */
  --type-label:      0.6875rem; /* 11 — HARD FLOOR */
  --type-data-xl:    1.75rem;   /* 28 -> 34 */
  --type-data:       1.125rem;  /* 18 -> 19 */
  --type-data-sm:    0.8125rem; /* 13 */
}

@media (min-width: 640px) {
  :root {
    --type-display-xl: 3.75rem;
    --type-display:    2.25rem;
    --type-title:      1.25rem;
    --type-data-xl:    2.125rem;
    --type-data:       1.1875rem;
  }
}

/* One family, and a missing weight fails loudly rather than being faux-bolded. */
body {
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: var(--type-body);
  line-height: 1.6;
  font-synthesis: none;
}

/* Utility classes, one per token. Weight is free within a token; size is not. */
.t-display-xl {
  font-size: var(--type-display-xl);
  line-height: 0.95;
  letter-spacing: -0.022em;
  font-variation-settings: 'wdth' 88, 'wght' 700;
}

.t-display {
  font-size: var(--type-display);
  line-height: 1;
  letter-spacing: -0.018em;
  font-variation-settings: 'wdth' 88, 'wght' 700;
}

.t-title {
  font-size: var(--type-title);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
}

/* Title size at body weight — hero subheads and lead-ins. */
.t-title-lead {
  font-size: var(--type-title);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.t-body {
  font-size: var(--type-body);
  line-height: 1.6;
}

/* Long-form copy: measure-capped and looser for reading. */
.t-prose {
  font-size: var(--type-body);
  line-height: 1.75;
  max-width: 62ch;
}

.t-body-sm {
  font-size: var(--type-body-sm);
  line-height: 1.5;
}

.t-label {
  font-size: var(--type-label);
  line-height: 1.2;
  letter-spacing: 0.09em;
  font-weight: 700;
  text-transform: uppercase;
}

/* Numbers are tabular so columns don't jitter as values update. */
.t-data-xl {
  font-size: var(--type-data-xl);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.t-data {
  font-size: var(--type-data);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.t-data-sm {
  font-size: var(--type-data-sm);
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}