/**
 * YWA Typography — role classes
 * ---------------------------------------------------------------------------
 * Each role bundles family + size + weight + line-height + letter-spacing,
 * exactly as tokens-spec.md defines them. Templates use these classes rather
 * than setting type properties by hand.
 *
 * Three families, three jobs:
 *   serif (Hedvig Letters Serif) — display, title, heading-1 ONLY
 *   sans  (Inter)                — the workhorse: everything else
 *   nav   (Cooper Hewitt)        — navbar + footer chrome ONLY, never content
 *
 * Sizes come from tokens.css and shift automatically at the lg breakpoint
 * (tablet shares the mobile scale). Leading and tracking are relative, so
 * they follow the size without per-mode values.
 *
 * ---------------------------------------------------------------------------
 * TWO SPEC CONFLICTS — resolved conservatively, flagged for Josh:
 *
 * 1. Hedvig weight. The role table lists weight 600 for display / title /
 *    heading-1, but the family notes state Hedvig Letters Serif "ships only
 *    Regular." Asking for 600 against a Regular-only family makes the browser
 *    synthesise a fake bold, which looks smeared. Using 400 here.
 *
 * 2. heading-2 weight. The role table says 600; the serif-assignment prose
 *    says "Inter (Bold for 2, Semi Bold for 3-4)" — i.e. 700. Following the
 *    canonical role table (600) since it is the spec's own dictionary.
 *
 * Both are one-line changes if Josh rules the other way.
 * ---------------------------------------------------------------------------
 */

/* ===========================================================================
   EDITORIAL ROLES
   =========================================================================== */

.type-display {
  font-family: var(--type-family-serif);
  font-size: var(--type-size-display);
  font-weight: var(--type-weight-regular); /* see conflict 1 */
  line-height: var(--type-leading-display);
  letter-spacing: var(--type-tracking-display);
}

.type-title {
  font-family: var(--type-family-serif);
  font-size: var(--type-size-title);
  font-weight: var(--type-weight-regular); /* see conflict 1 */
  line-height: var(--type-leading-title);
  letter-spacing: var(--type-tracking-title);
}

.type-heading-1 {
  font-family: var(--type-family-serif);
  font-size: var(--type-size-heading-1);
  font-weight: var(--type-weight-regular); /* see conflict 1 */
  line-height: var(--type-leading-heading-1);
  letter-spacing: var(--type-tracking-heading-1);
}

/* SERIF from 1.6.6 (Josh, 2026-07-28). The serif lane used to stop after
   heading-1, which put every section header our blocks build (all `heading-1`)
   in Hedvig while every heading an EDITOR types — a bare <h2> landing on the
   base.css default — came out in Inter. Same job on the page, two typefaces,
   decided by who happened to author it. Moving the lane boundary down one step
   makes the two agree: display / title / heading-1 / heading-2 serif,
   heading-3 / heading-4 sans.
   Weight drops to regular with the family: Hedvig ships Regular only, so a
   medium here would be a synthesised fake bold. */
.type-heading-2 {
  font-family: var(--type-family-serif);
  font-size: var(--type-size-heading-2);
  /* Regular, like every other serif role. This line used to be semibold and was
     masked by the LIGHTER-INTER block below forcing it to medium; taking it out
     of that block let the semibold resurface as a synthesised fake bold. Caught
     by measuring the class after the change — the bare-<h2> default next door in
     base.css was already correct, so the page looked right and only the class
     was wrong. */
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-heading-2);
  letter-spacing: var(--type-tracking-heading-2);
}

.type-heading-3 {
  font-family: var(--type-family-sans);
  font-size: var(--type-size-heading-3);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-leading-heading-3);
  letter-spacing: var(--type-tracking-none);
}

.type-heading-4 {
  font-family: var(--type-family-sans);
  font-size: var(--type-size-heading-4);
  font-weight: var(--type-weight-semibold);
  line-height: var(--type-leading-heading-4);
  letter-spacing: var(--type-tracking-none);
}

.type-body-lead {
  font-family: var(--type-family-sans);
  font-size: var(--type-size-body-lead);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-body);
  letter-spacing: var(--type-tracking-none);
}

.type-body {
  font-family: var(--type-family-sans);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-body);
  letter-spacing: var(--type-tracking-none);
}

.type-body-small {
  font-family: var(--type-family-sans);
  font-size: var(--type-size-body-small);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-body);
  letter-spacing: var(--type-tracking-none);
}

/* Card / dense body (§2 body.compact). Held at 14 across all widths — the role
   for event-card descriptions, list rows, dense cards. Distinct from body-small,
   which drops to 12 at desktop; this never becomes fine-print. */
.type-body-compact {
  font-family: var(--type-family-sans);
  font-size: var(--type-size-body-compact);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-body);
  letter-spacing: var(--type-tracking-none);
}

.type-eyebrow {
  font-family: var(--type-family-sans);
  font-size: var(--type-size-eyebrow);
  font-weight: var(--type-weight-medium);
  line-height: var(--type-leading-tight);
  letter-spacing: var(--type-tracking-eyebrow);
  text-transform: uppercase;
}

.type-meta {
  font-family: var(--type-family-sans);
  font-size: var(--type-size-meta);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-body);
  letter-spacing: var(--type-tracking-none);
}

.type-code {
  font-family: var(--type-family-mono);
  font-size: var(--type-size-code);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-body);
  letter-spacing: var(--type-tracking-none);
}

/* ===========================================================================
   UI / INTERACTIVE ROLES — buttons, nav links, form controls, chip labels
   =========================================================================== */

.type-action {
  font-family: var(--type-family-sans);
  font-size: var(--type-size-action);
  font-weight: var(--type-weight-medium);
  line-height: var(--type-leading-tight);
  letter-spacing: var(--type-tracking-none);
}

.type-action-small {
  font-family: var(--type-family-sans);
  font-size: var(--type-size-action-small);
  font-weight: var(--type-weight-medium);
  line-height: var(--type-leading-tight);
  letter-spacing: var(--type-tracking-none);
}

/* ===========================================================================
   DATA ROLES — list-heavy Media Library views
   =========================================================================== */

.type-data-header {
  font-family: var(--type-family-sans);
  font-size: var(--type-size-data-header);
  font-weight: var(--type-weight-medium);
  line-height: var(--type-leading-data);
  letter-spacing: var(--type-tracking-data-header);
  text-transform: uppercase;
}

.type-data-row {
  font-family: var(--type-family-sans);
  font-size: var(--type-size-data-row);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-data);
  letter-spacing: var(--type-tracking-none);
}

.type-data-cell-emphasis {
  font-family: var(--type-family-sans);
  font-size: var(--type-size-data-cell-emphasis);
  font-weight: var(--type-weight-medium);
  line-height: var(--type-leading-data);
  letter-spacing: var(--type-tracking-none);
}

.type-data-cell-meta {
  font-family: var(--type-family-sans);
  font-size: var(--type-size-data-cell-meta);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-body);
  letter-spacing: var(--type-tracking-none);
}

/* ===========================================================================
   NAV CHROME — Cooper Hewitt. Navbar and footer ONLY.
   Never apply to content, body, form or heading roles.
   =========================================================================== */

/* Nav link text. Book (400) with a little tracking — chosen on-screen
   2026-07-23 (option "5.1"), over the Figma design's Medium/0, which read
   tight and heavy. The Figma nav text style is owed the same change in a
   design session. Applies to header nav links, the mobile drawer, and the
   footer link row (all share this role). */
.type-nav {
  font-family: var(--type-family-brand);
  font-size: var(--type-size-action);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-tight);
  letter-spacing: var(--type-tracking-nav);
}

.type-nav-small {
  font-family: var(--type-family-brand);
  font-size: var(--type-size-action-small);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-tight);
  letter-spacing: var(--type-tracking-nav);
}

/* ===========================================================================
   LIGHTER INTER — the type default (locked 2026-07-24).
   Josh found Inter reading dense / "very Inter"; dropping the Inter weights a
   notch reads airier. Body/paragraph Inter → light (350); Inter headings →
   medium (500, was semibold). Kept in one block so the weight is easy to tune.
   Serif (Hedvig) + nav chrome (Cooper Hewitt) set their own weights and are
   untouched. OVERRIDES Figma (Inter regular/semibold) — see reconciliation list.
   =========================================================================== */
.type-body,
.type-body-lead,
.type-body-small,
.type-meta { font-weight: var(--type-weight-light); }

/* heading-2 is NOT in this list any more — it moved into the serif lane in
   1.6.6, and this block is for Inter only. Leaving it here would have forced
   medium onto a family that ships Regular alone, which the browser fakes by
   smearing the outline. It sets its own regular weight above, with the rest of
   the serif roles. */
.type-heading-3,
.type-heading-4 { font-weight: var(--type-weight-medium); }