/* =============================================================
   Peak Body Coach · Type System · tokens-type.css
   v1.2 — Hero line-height tightened to 0.92.
          Pullquote weight changed to Regular 400.
   Locked. Pair with tokens-colours.css and tokens-spacing.css.
   ============================================================= */

:root {

  /* ---------- 1. Font families ---------- */

  --font-wordmark:  "Söhne", "Inter", system-ui, sans-serif;
  --font-display:   "Anton", "Impact", "Helvetica Neue Condensed", sans-serif;
  --font-body:      "Switzer", "Inter", system-ui, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;


  /* ---------- 2. Font weights ---------- */
  /* Use weight tokens, not raw numbers, so the system stays self-documenting */

  --weight-regular:    400;
  --weight-medium:     500;
  --weight-bold:       700;
  --weight-extrabold:  800;
  --weight-wordmark:   600;   /* Söhne Halbfett */


  /* ---------- 3. Role tokens ---------- */
  /* Each role bakes in size, line-height, letter-spacing.
     Apply via the helper classes below — they enforce the rulebook. */

  /* Wordmark — logo only */
  --type-wordmark-size:           38px;
  --type-wordmark-line-height:    1.0;
  --type-wordmark-letter-spacing: 0;

  /* Hero — site hero, social cover slides */
  /* v1.1 — line-height tightened from 0.95 → 0.92.
     At 120px+ in Anton, 0.95 reads loose and the stack loses its
     slab/poster character. 0.92 holds the dense block at hero scale. */
  --type-hero-size-min:           140px;
  --type-hero-size-max:           380px;
  --type-hero-line-height:        0.92;
  --type-hero-letter-spacing:     -0.01em;

  /* H1 — article titles within long-form */
  /* H1 stays at 0.95 — at 80–140px the looser ratio gives the
     two-line case room to breathe without losing the lockup.
     Decision logged in stress-test review (May 2026). */
  --type-h1-size-min:             80px;
  --type-h1-size-max:             140px;
  --type-h1-line-height:          0.95;
  --type-h1-letter-spacing:       -0.01em;

  /* H2 — section breaks */
  --type-h2-size-min:             32px;
  --type-h2-size-max:             40px;
  --type-h2-line-height:          1.2;
  --type-h2-letter-spacing:       -0.005em;

  /* H3 — sub-sections */
  --type-h3-size-min:             22px;
  --type-h3-size-max:             28px;
  --type-h3-line-height:          1.25;
  --type-h3-letter-spacing:       0;

  /* Subhead — below H1, deck copy */
  --type-subhead-size-min:        22px;
  --type-subhead-size-max:        28px;
  --type-subhead-line-height:     1.35;
  --type-subhead-letter-spacing:  0;

  /* Body — primary reading copy */
  --type-body-size-min:           18px;
  --type-body-size-max:           22px;
  --type-body-line-height:        1.5;
  --type-body-letter-spacing:     0;

  /* Pull quote */
  /* v1.1 — weight changed from Medium 500 → Regular 400 in
     .type-pullquote helper class below. The 3px red side-rule
     does the visual lifting; Medium added pictorial weight that
     competed with the rule. */
  --type-pullquote-size-min:      26px;
  --type-pullquote-size-max:      32px;
  --type-pullquote-line-height:   1.3;
  --type-pullquote-letter-spacing: 0;

  /* Mono labels */
  --type-monolabel-size-min:      12px;
  --type-monolabel-size-max:      18px;
  --type-monolabel-line-height:   1.0;
  --type-monolabel-letter-spacing: 0.05em;
}


/* =============================================================
   Type role classes — apply directly to elements
   ============================================================= */

.type-wordmark {
  font-family: var(--font-wordmark);
  font-weight: var(--weight-wordmark);
  font-size: var(--type-wordmark-size);
  line-height: var(--type-wordmark-line-height);
  letter-spacing: var(--type-wordmark-letter-spacing);
  text-transform: none;   /* title case — never override */
}

.type-hero {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(var(--type-hero-size-min), 18vw, var(--type-hero-size-max));
  line-height: var(--type-hero-line-height);
  letter-spacing: var(--type-hero-letter-spacing);
  text-transform: uppercase;   /* Rule 02 — always */
}

.type-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(var(--type-h1-size-min), 8vw, var(--type-h1-size-max));
  line-height: var(--type-h1-line-height);
  letter-spacing: var(--type-h1-letter-spacing);
  text-transform: uppercase;
}

.type-h2 {
  font-family: var(--font-body);
  font-weight: var(--weight-extrabold);
  font-size: clamp(var(--type-h2-size-min), 3vw, var(--type-h2-size-max));
  line-height: var(--type-h2-line-height);
  letter-spacing: var(--type-h2-letter-spacing);
  text-transform: none;   /* Rule 03 — sentence case */
}

.type-h3 {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: clamp(var(--type-h3-size-min), 2vw, var(--type-h3-size-max));
  line-height: var(--type-h3-line-height);
  letter-spacing: var(--type-h3-letter-spacing);
  text-transform: none;
}

.type-subhead {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: clamp(var(--type-subhead-size-min), 2vw, var(--type-subhead-size-max));
  line-height: var(--type-subhead-line-height);
  letter-spacing: var(--type-subhead-letter-spacing);
  text-transform: none;
}

.type-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: clamp(var(--type-body-size-min), 1.4vw, var(--type-body-size-max));
  line-height: var(--type-body-line-height);
  letter-spacing: var(--type-body-letter-spacing);
  text-transform: none;
}

.type-pullquote {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);   /* v1.1 — was --weight-medium */
  font-size: clamp(var(--type-pullquote-size-min), 2vw, var(--type-pullquote-size-max));
  line-height: var(--type-pullquote-line-height);
  letter-spacing: var(--type-pullquote-letter-spacing);
  text-transform: none;
}

.type-mono-label {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: clamp(var(--type-monolabel-size-min), 1vw, var(--type-monolabel-size-max));
  line-height: var(--type-monolabel-line-height);
  letter-spacing: var(--type-monolabel-letter-spacing);
  text-transform: uppercase;   /* default — sentence case allowed only for inline code */
}


/* =============================================================
   Notes
   =============================================================
   1. Four fonts is the cap. Never add a fifth.

   2. Each font has one case and one size band. Helper classes
      bake this in — using them prevents accidental rule breaks.

   3. Söhne is wordmark-only. There is no helper class for any
      role other than .type-wordmark using --font-wordmark.

   4. Anton is display-only. Sizes below 60px would break Rule 02 —
      the size clamps in .type-hero and .type-h1 prevent this.

   5. JetBrains Mono is labels-only. Setting body or heading copy
      in mono is a sign the system has been broken.

   6. Pair with tokens-colours.css and tokens-spacing.css. Surface
      and accent decisions live in colours; spatial structure
      lives in spacing; typographic structure lives here.

   7. v1.1 changes (May 2026):
      - --type-hero-line-height: 0.95 → 0.92
      - .type-pullquote weight: Medium 500 → Regular 400
      Hero LH 0.92 holds slab character at poster scale; H1 stays
      at 0.95 because the two-line case needs room to breathe.

   8. v1.2 — stress-test findings:
      - Lead paragraphs flow at body width or wider, never narrower.
        A narrower lead before wider body creates a visual stutter.
      - Numerical section labels (01 / 02 / 03 in mono) over written
        labels (Chapter One / Two / Three). The mono label IS the
        signal; the words make it precious.
      Both findings live in the component patterns spec, not in
      these tokens — they're applied at composition, not type-role,
      level. Logged here for cross-reference.
*/