/* ============================================================
   Hawley Design System — type layer v1.0 (2026-07-21)
   Source of truth. Consume these tokens; never hardcode a
   font, size, weight, line-height, or measure in a component.
   Rationale + rules: DESIGN-SYSTEM.md (same folder).
   ============================================================ */

/* ---- faces (self-hosted, licensed — never swap for a Google/Fontshare font) ---- */
@font-face { font-family: 'Founders Grotesk'; src: url('./fonts/FoundersGrotesk-Regular.otf'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Founders Grotesk'; src: url('./fonts/FoundersGrotesk-RegularItalic.otf'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Founders Grotesk'; src: url('./fonts/FoundersGrotesk-Medium.otf'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Founders Grotesk'; src: url('./fonts/FoundersGrotesk-MediumItalic.otf'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Founders Grotesk'; src: url('./fonts/FoundersGrotesk-Semibold.otf'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Brown'; src: url('./fonts/Brown-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Brown'; src: url('./fonts/Brown-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Brown'; src: url('./fonts/Brown-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---- families ---- */
  --font-display: 'Founders Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Brown', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; /* code/data only — never a decorative label device */

  /* ---- weights ---- */
  --w-display: 500;        /* headings — THE weight. Do not bold headings past this without sign-off */
  --w-display-strong: 600; /* rare emphasis inside a display setting */
  --w-body: 400;
  --w-body-strong: 700;    /* strong/inline emphasis in body copy */

  /* ---- modular scale — ratio 1.25 (major third), fluid via clamp ----
     Chosen for a calm editorial rhythm. Every font-size on every page is
     one of these steps. No exceptions, no fresh values. */
  --text-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);  /* 12–13: captions, fine print */
  --text-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); /* 14–15: secondary, UI labels */
  --text-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);      /* 16–18: body */
  --text-md:   clamp(1.25rem, 1.19rem + 0.30vw, 1.4rem);     /* 20–22: ledes, h4 */
  --text-lg:   clamp(1.5rem, 1.41rem + 0.45vw, 1.75rem);     /* 24–28: h3 */
  --text-xl:   clamp(1.875rem, 1.72rem + 0.75vw, 2.25rem);   /* 30–36: h2 */
  --text-2xl:  clamp(2.3rem, 2.05rem + 1.30vw, 2.85rem);     /* 37–46: h1 */
  --text-3xl:  clamp(2.85rem, 2.45rem + 2.00vw, 3.6rem);     /* 46–58: hero display */

  /* ---- leading — inverse to size, per tier ---- */
  --leading-display: 1.08; /* --text-2xl/3xl */
  --leading-heading: 1.2;  /* --text-lg/xl */
  --leading-subhead: 1.3;  /* --text-md */
  --leading-body: 1.6;     /* --text-base/sm */
  --leading-caption: 1.4;  /* --text-xs */

  /* ---- tracking ---- */
  --track-display: -0.012em; /* display sizes only */
  --track-heading: -0.008em;
  --track-body: 0;           /* NEVER track body text */
  --track-caps: 0.06em;      /* short all-caps runs only (rare) */

  /* ---- measure ---- */
  --measure: 66ch;        /* body text cap — always applied */
  --measure-narrow: 34ch; /* ledes / standfirsts */
  --measure-display: 18ch;/* display headings */
}

/* ---- base — canonical application of the tokens ---- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-weight: var(--w-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: common-ligatures contextual;
  hanging-punctuation: first last;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-2xl); line-height: var(--leading-display); letter-spacing: var(--track-display); max-width: var(--measure-display); }
h2 { font-size: var(--text-xl); line-height: var(--leading-heading); letter-spacing: var(--track-heading); }
h3 { font-size: var(--text-lg); line-height: var(--leading-heading); letter-spacing: var(--track-heading); }
h4 { font-size: var(--text-md); line-height: var(--leading-subhead); }
.display { font-size: var(--text-3xl); line-height: var(--leading-display); letter-spacing: var(--track-display); max-width: var(--measure-display); }
p, ul, ol { margin: 0; max-width: var(--measure); text-wrap: pretty; }
.lede { font-size: var(--text-md); line-height: var(--leading-subhead); max-width: var(--measure-narrow); }
small, .caption { font-size: var(--text-xs); line-height: var(--leading-caption); }
strong, b { font-weight: var(--w-body-strong); }

/* ---- figures ---- */
.tabnum, time, table td { font-variant-numeric: tabular-nums; } /* anything that must align */
.oldstyle { font-variant-numeric: oldstyle-nums; }              /* running prose, optional */

/* ---- alignment: left. Do not justify. Do not centre body copy. ---- */