/* Young Marketers — typography.
   Two typefaces, split by language: Jost for English, Josefin Sans for Vietnamese (see fonts.css).
   One scale set serves both. Three scales, each anchored to a real artboard from the source material.

   POSTER  — 2048x2560 (4:5) announcement artboard. Sentence-case Light hero, colossal numerals.
   DOCUMENT— 794x1122 (A4) Registration Guide. Uppercase 600 cover title, 12.4px body.
   SCREEN  — web/social, document scale x1.3 for comfortable reading at arm's length.

   Constants across all three: tight leading, negative tracking on display sizes,
   heavy positive tracking (.14em-.24em) on uppercase labels. */

:root {
  /* ---- Vietnamese optical correction ----
     Josefin's x-height is 0.378em against Jost's 0.460em; its cap height matches Jost's to within
     0.3%. So: multiply running lowercase Vietnamese by this, leave uppercase and display alone. */
  --ym-vn-optical: 1.18; /* @kind other */

  /* ---- weights (both families variable, 100-900) ---- */
  --ym-weight-light: 300;
  --ym-weight-regular: 400;
  --ym-weight-medium: 500;
  --ym-weight-semibold: 600;

  /* ---- tracking ---- */
  --ym-track-hero: -0.02em;
  --ym-track-title: -0.025em;
  --ym-track-heading: -0.012em;
  --ym-track-tight: -0.004em;
  --ym-track-numeral: -0.02em;
  --ym-track-tag: 0.14em;
  --ym-track-overline: 0.2em;
  --ym-track-kicker: 0.24em;
  --ym-track-wide: 0.3em;
  /* Tracking floor for Vietnamese display type. Tighter than this and the horn on ơ/ư
     touches the following letter. Uppercase tracked labels are safe at any value. */
  --ym-track-vn-floor: -0.02em;

  /* ---- leading ---- */
  --ym-leading-title: 0.94;
  --ym-leading-hero: 1.04;
  --ym-leading-heading: 1.1;

  /* Vietnamese display leading. Stacked tone marks (ắ ế ộ ữ) add roughly 9% to the ascent,
     and 0.94 clips them. Body leading is unchanged — 1.52 already clears the stack. */
  --ym-leading-title-vn: 1.06;
  --ym-leading-hero-vn: 1.14;
  --ym-leading-heading-vn: 1.22;
  --ym-leading-snug: 1.18;
  --ym-leading-quote: 1.24;
  --ym-leading-tight-body: 1.4;
  --ym-leading-body: 1.52;

  /* ---- POSTER scale — absolute px on the 2048x2560 artboard ---- */
  --ym-poster-hero: 106px;
  --ym-poster-numeral: 250px;
  --ym-poster-date: 120px;
  --ym-poster-section: 30px;
  --ym-poster-body: 25px;
  --ym-poster-kicker: 20px;
  --ym-poster-micro: 16px;

  /* ---- POSTER scale — as a ratio of artboard width, for any 4:5 output ---- */
  --ym-poster-hero-r: 5.18%;
  --ym-poster-numeral-r: 12.21%;
  --ym-poster-body-r: 1.22%;

  /* ---- DOCUMENT scale — exact values from the S15 Registration Guide (A4 794px) ---- */
  --ym-doc-h1: 64px;
  --ym-doc-h2: 27px;
  --ym-doc-h3: 15.5px;
  --ym-doc-quote: 17px;
  --ym-doc-lede: 13.4px;
  --ym-doc-body: 12.4px;
  --ym-doc-sm: 11.3px;
  --ym-doc-xs: 10.3px;
  --ym-doc-kicker: 9.4px;
  --ym-doc-overline: 8.8px;
  --ym-doc-tag: 8.6px;
  --ym-doc-micro: 7px;

  /* ---- DECK scale — 1280x720 teaching slide. The poster's 5.76% margin, rescaled. ---- */
  --ym-deck-hero: 72px;
  --ym-deck-numeral: 132px;
  --ym-deck-h1: 54px;
  --ym-deck-h2: 36px;
  --ym-deck-h3: 22px;
  --ym-deck-quote: 30px;
  --ym-deck-lede: 20px;
  --ym-deck-body: 17px;
  --ym-deck-sm: 15px;
  --ym-deck-xs: 13px;
  --ym-deck-kicker: 11px;
  --ym-deck-tag: 10.5px;
  --ym-deck-micro: 9.5px;

  /* ---- SCREEN scale — web, social, presentation ---- */
  --ym-screen-hero: 72px;
  --ym-screen-h1: 48px;
  --ym-screen-h2: 34px;
  --ym-screen-h3: 20px;
  --ym-screen-quote: 22px;
  --ym-screen-lede: 18px;
  --ym-screen-body: 16px;
  --ym-screen-sm: 14px;
  --ym-screen-xs: 13px;
  --ym-screen-kicker: 12px;
  --ym-screen-overline: 11px;
  --ym-screen-tag: 11px;
}

/* Numerals are tabular everywhere — dates, counts, deadlines and scores must align. */
:root { font-variant-numeric: tabular-nums; }

/* Vietnamese display leading swaps itself wherever the language is declared. Body copy is
   untouched. Pair with the face swap in tokens/fonts.css. */
:lang(vi), [lang="vi"], .ym-vn {
  --ym-leading-title: var(--ym-leading-title-vn);
  --ym-leading-hero: var(--ym-leading-hero-vn);
  --ym-leading-heading: var(--ym-leading-heading-vn);
}

/* Bilingual pairing — English primary, Vietnamese secondary. Never the reverse, and never
   two equal-weight languages competing for the same line. */
.ym-vi { font-family: var(--ym-font-vn); font-style: italic; color: var(--ym-mute-aa); }
.ym-dark .ym-vi, .ym-dark-ground .ym-vi { color: var(--ym-on-dark-60); }