/* Dojang — type system.
 *
 * The single place the landing page's type is defined. Components consume
 * tokens from here and never name a family themselves, so the whole pairing
 * swaps by editing this one file — or, for an A/B, by setting one attribute:
 *
 *     <html data-typeface="legacy">      ← Instrument Serif + Inter
 *     <html>                             ← Google Sans (default)
 *
 * Both pairings are defined below. The legacy one is what this page shipped
 * before the Google Sans migration; it is kept wired up, not just commented
 * out, so the two can be compared without touching a component rule.
 *
 * Loaded LAST, after index.html's inline <style>, on purpose: the calibrations
 * at the bottom (label treatment, figures, paragraph leading) exist to correct
 * the component rules above them, and equal-specificity ties go to whichever
 * stylesheet came later.
 *
 * ── Two tiers, and why ──────────────────────────────────────────────────────
 * Google Sans is a display cut. It is drawn to be looked at, not read in bulk,
 * and it turns muddy in dense UI. So it is scoped to 20px and up — headings,
 * stat values, the hero. Everything below that line — nav, labels, buttons,
 * meta, form text, table cells — runs on Google Sans Text, the reading cut of
 * the same design. --lp-display-sm is the token for headings that land under
 * the line; a display face at 15px is the exact thing this rule exists to stop.
 *
 * ── Licensing and fallbacks ─────────────────────────────────────────────────
 * All three families are on Google Fonts under the SIL Open Font License 1.1
 * and are served for real, so every visitor gets the actual face — the stack
 * below is a genuine fallback chain, not a stand-in for something we can't
 * ship. Poppins and Roboto stay named as the nearest geometric and text
 * substitutes should the font CSS ever fail to load, but they are not
 * requested; an unloaded, uninstalled family is simply skipped.
 *
 * Neither Google Sans nor Google Sans Text covers Hangul, so both tiers end in
 * Noto Sans KR and Hangul resolves through the same stack as Latin — no
 * lang-conditional family rule needed.
 *
 * Weight availability differs between the tiers and it matters:
 *   Google Sans      variable 400–700, with a true italic
 *   Google Sans Text static, 400 / 500 / 700 only — no 600
 * Asking Google Sans Text for 600 would snap it up to 700, so the sub-20px
 * heading tier holds 500 deliberately (--lp-display-sm-weight).
 */

/* ═══════════════ Pairing: Google Sans (default) ═══════════════ */
:root {
  --font-display: 'Google Sans', 'Product Sans', 'Poppins', 'Noto Sans KR', sans-serif;
  --font-sans:    'Google Sans Text', 'Google Sans', 'Roboto', 'Noto Sans KR', sans-serif;
  --font-mono:    'Google Sans Code', 'JetBrains Mono', ui-monospace, monospace;

  --lp-body: var(--font-sans);
  --lp-display: var(--font-display);
  --lp-display-sm: var(--font-sans);

  /* Round geometric forms set loose and read light at large sizes: 400 looks
     weak where the old serif looked composed, so display holds 600 and pulls
     the tracking in. */
  --lp-display-weight: 600;
  /* Google Sans Text has no 600 — see the header note. */
  --lp-display-sm-weight: 500;
  --lp-display-tracking: -0.025em;
  --lp-display-leading: 1.02;

  /* The ×0.84 family correction. Every display size on this page was picked by
     eye for Instrument Serif; a geometric sans at the same px reads noticeably
     larger, so the whole display scale comes down to match. Kept as a
     multiplier rather than baked into each size so a language pack can supply
     its own script correction instead (Korean does — see i18n/ko.json). */
  --lp-display-scale: 0.84;

  --lp-h1-italic-color: var(--accent-ink);

  /* Geometric letterforms crowd each other at label sizes, and 400 goes muddy
     on tinted grounds. */
  --lp-label-weight: 500;
  --lp-label-tracking: 0.07em;

  /* Google Sans defaults to proportional figures, which wobble the moment a
     column has to line up. */
  --lp-figures: tabular-nums lining-nums;

  /* Circular letterforms need more air between lines than the serif did, or
     paragraphs lock together. */
  --lp-para-leading: 1.6;
}

/* ═══════════════ Pairing: Instrument Serif + Inter (legacy) ═══════════════
   Kept defined and reachable for A/B, not deleted. Set data-typeface="legacy"
   on <html>. The families are listed in the font <link> too, which costs the
   default pairing only a few hundred bytes of CSS — a webfont is not
   downloaded until a glyph actually asks for it, so nothing here is fetched
   unless the attribute is set.

   One deliberate difference from the original: Korean display stays on Noto
   Sans KR rather than reviving Noto Serif KR. Re-adding the serif would put a
   second CJK download in front of every Korean visitor to serve a temporary
   comparison. Latin — the thing the A/B is actually judging — is exact. */
:root[data-typeface="legacy"] {
  --font-display: 'Instrument Serif', Georgia, 'Noto Sans KR', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* The serif was used at every heading size — there was no second tier. */
  --lp-display-sm: var(--font-display);
  --lp-display-sm-weight: 400;

  --lp-display-weight: 400;
  --lp-display-tracking: -0.025em;
  --lp-display-leading: 0.98;
  --lp-display-scale: 1;

  --lp-label-weight: 400;
  --lp-label-tracking: 0.06em;
  --lp-figures: tabular-nums;
  --lp-para-leading: 1.5;
}
/* Inter's stylistic sets, which the Google Sans stack has no use for. */
:root[data-typeface="legacy"] body {
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
/* The three micro-labels the serif set tighter than the shared token. */
:root[data-typeface="legacy"] .lp-lang button,
:root[data-typeface="legacy"] .lp-ctag {
  letter-spacing: 0.04em;
}

/* ═══════════════ Calibrations ═══════════════
   Family-level corrections, kept here rather than sprinkled through the
   component rules they correct. Every value is a token, so the pairing swap
   above carries them with it. */

/* Form controls do not inherit font-family — the UA sheet hands them Arial,
   which is where the language toggle and the signup button have quietly been
   this whole time. Buttons and form text are text-tier; put them back on it. */
button, input, select, textarea {
  font-family: inherit;
}

/* Uppercase micro-labels hold the label weight. Labels already set heavier
   (footer column heads, changelog tags, the language toggle) keep their own
   weight — this is the floor these need, not a ceiling to pull them down to. */
.lp-eyebrow,
.lp-section-kicker,
.lp-cta-eyebrow,
.lp-logos-label,
.lp-pm-stat .l,
.lp-sched-grid > div {
  font-weight: var(--lp-label-weight);
}

/* Same rule's other half: open the tracking on the labels the old serif set
   tighter than the token. Labels already looser (the 0.14em eyebrows) are left
   alone — that spacing is a deliberate call, and it is past the floor anyway. */
.lp-sched-grid > div,
.lp-lang button,
.lp-ctag {
  letter-spacing: var(--lp-label-tracking);
}

/* Lining + tabular on every stat, count, time, and amount. */
.tnum,
.lp-trust-num,
.lp-pm-sub,
.lp-pm-stat .v,
.lp-pm-stat .d,
.lp-product-navitem .count,
.lp-pipe-n,
.lp-pipe-ready,
.lp-module-num,
.lp-feature-list .ix,
.lp-principles .pn,
.lp-belt-head .s,
.lp-belt-card .meta,
.lp-belt-foot,
.lp-sched-head .s,
.lp-sched-body > .hour,
.lp-sched-block .mt,
.lp-stat-cell .v,
.lp-price-tag .n,
.lp-changelog-row .date,
.lp-changelog-row .ver {
  font-variant-numeric: var(--lp-figures);
}

/* Sets the default only — every paragraph that carries a class keeps the
   leading that rule gives it, since a class outranks a bare element selector. */
p {
  line-height: var(--lp-para-leading);
}
