/* tokens-space-type-v1 — W-56-2 — Saadjie typography token layer. */
/* type-fonts-load-v1 — W-57-1 — Cormorant + Inter pairing locked in. */
/*
 * Planning: .archon/queued-builds/WAVE-56-design-tokens.md
 *            .archon/queued-builds/WAVE-57-type-scale.md
 *
 * WHY a scale (not arbitrary sizes): a 7-step type scale gives the surface
 * a clear hierarchy without authors picking sizes by feel. Steps follow a
 * roughly 1.125–1.25 modular ratio — close enough to "perfect fourth" to
 * read as a system, loose enough that each step has a distinct use.
 *
 * WHY rem (not px): respects the user's browser font-size preference.
 * The reset pins html { font-size: 100% } so 1rem === 16px by default.
 *
 * GOTCHA: --font-size-base MUST stay ≥ 16px (1rem) on mobile. iOS Safari
 * auto-zooms any <input> rendered below 16px on focus — that zoom never
 * reverses cleanly and leaves the layout broken. Form partials in
 * src/views/components/forms/ inherit this base size; do not override
 * them below 16px in any media query.
 *
 * WHY Cormorant Garamond + Inter (W-57-1 update): Cormorant Garamond is
 * the Saadjie brand serif — high-contrast, generous counters, reads as
 * editorial / personal rather than corporate. Inter is the modern
 * neutral sans for UI + body — designed for screens, hinted aggressively,
 * pairs cleanly with serif headings because its x-height is close to
 * Cormorant's. The two families share enough rhythm to feel intentional
 * without looking matched.
 *
 * WHY the system stack stays as the fallback (not removed): until the
 * web fonts load from fonts.gstatic.com, the browser renders text with
 * the next family in the stack. Keeping a tuned system stack means the
 * pre-swap render uses SF / Roboto / Segoe rather than Times — visually
 * close enough that the swap is unobtrusive.
 *
 * FLOW: src/views/layouts/main.ejs preconnects to fonts.googleapis.com +
 *       fonts.gstatic.com and pulls the Cormorant + Inter stylesheet with
 *       display=swap. This file is the *token* layer that names the
 *       families; component CSS reads them via var(--font-family-*).
 */

:root {
  /* ---------- Font families ----------
     WHY Inter first, then a long system stack: Inter is the Saadjie
     body + UI face (loaded from Google Fonts in layouts/main.ejs with
     display=swap). Until the woff2 lands, the browser falls through to
     system-ui (SF on iOS, Roboto on Android, Segoe UI on Windows) — a
     near-identical neutral sans, so the swap is visually minor.

     WHY Cormorant Garamond first on --font-family-heading: brand serif
     for display + headings. Falls back to Georgia (the most widely
     installed transitional serif), then the generic serif keyword for
     legacy systems. */
  --font-family-base:
    "Inter",
    system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --font-family-heading:
    "Cormorant Garamond",
    Georgia, "Times New Roman", Times, serif;
  --font-family-mono:
    ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* ---------- Type scale ----------
     WHY base is 1rem (not larger): inputs inherit this; staying at 1rem
     keeps iOS Safari from forcing a zoom on focus. Heading sizes scale
     up from there. */
  --font-size-xs:            0.75rem;     /* 12px — fine print, legal lines */
  --font-size-sm:            0.875rem;    /* 14px — captions, meta lines */
  --font-size-base:          1rem;        /* 16px — body, inputs (iOS floor) */
  --font-size-md:            1.125rem;    /* 18px — lead paragraph */
  --font-size-lg:            1.25rem;     /* 20px — h3 */
  --font-size-xl:            1.5rem;      /* 24px — h2 */
  --font-size-2xl:           1.875rem;    /* 30px — h1 mobile */
  --font-size-3xl:           2.25rem;     /* 36px — h1 tablet+ */
  --font-size-4xl:           3rem;        /* 48px — marketing hero only */

  /* ---------- Line heights ----------
     WHY tight on headings, loose on body: tight (1.2) keeps multi-line
     h1/h2 from feeling airy; base (1.5) is the WCAG-recommended floor
     for body text; loose (1.7) is for long-form prose blocks (the
     about / pilot-findings pages). */
  --line-height-none:        1;
  --line-height-tight:       1.2;
  --line-height-snug:        1.35;
  --line-height-base:        1.5;
  --line-height-relaxed:     1.625;
  --line-height-loose:       1.7;

  /* ---------- Font weights ----------
     WHY only three weights: system stacks vary in which weights ship.
     Sticking to 400 / 500 / 700 means every supported platform can
     render every weight natively — no font-synthesis fallback. */
  --font-weight-regular:     400;
  --font-weight-medium:      500;
  --font-weight-semibold:    600;
  --font-weight-bold:        700;

  /* ---------- Letter spacing ----------
     WHY tracking tokens (not free-form em values): the only places we
     adjust tracking are uppercase eyebrow labels and very large display
     headings. Two tokens cover both cases. */
  --tracking-tight:          -0.01em;
  --tracking-normal:         0;
  --tracking-wide:           0.025em;
  --tracking-wider:          0.05em;

  /* ---------- Compound text presets (semantic shortcuts) ----------
     WHY shortcuts in addition to atoms: components often want "the body
     style" or "the h2 style" without re-composing five tokens. Authors
     can opt into either — atoms when they need precision, presets when
     they want the canonical look. */
  --text-body-size:          var(--font-size-base);
  --text-body-leading:       var(--line-height-base);
  --text-body-weight:        var(--font-weight-regular);

  --text-meta-size:          var(--font-size-sm);
  --text-meta-leading:       var(--line-height-snug);
  --text-meta-weight:        var(--font-weight-regular);

  --text-heading-leading:    var(--line-height-tight);
  --text-heading-weight:     var(--font-weight-bold);
  --text-heading-tracking:   var(--tracking-tight);
}