/* ============================================================
   Sinh Vũ — Typography tokens  ·  SINGLE SOURCE OF TRUTH
   Change any typeface here and it updates everywhere (components,
   cards, UI kits). Six font roles:
     --font-display    Big Shoulders Inline — large uppercase display
     --font-heading    Roboto Condensed — H1–H4 & UI titles
     --font-sans       Inter — UI, body, labels
     --font-serif      Fraunces — editorial accent / pull-quotes / <em>
     --font-signature  Playwrite Norge — “Shaping Identity” signature only
     --font-viet       Be Vietnam Pro — Vietnamese-first specimen / fallback
     --font-mono       system mono — code / specimen metadata
   The webfont @imports live in tokens/fonts.css (add a family there
   too if you swap in one not already loaded).
   Calm, spacious, strongly hierarchical. Vietnamese diacritics
   render reliably in both families.
   ============================================================ */

:root {
  /* ---- Families ---- */
  /* Editorial voice = Inter (no contrasting serif) for system consistency.
     --font-serif is kept as an alias so existing component references update
     automatically; the editorial signal now comes from scale + the red quote mark. */
  --font-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Type scale (font-size / line-height pairs) ---- */
  --text-display:    clamp(3.5rem, 2.4rem + 4.6vw, 5rem); /* @kind other */
  --text-display-lh: 1.02;
  --text-h1:         clamp(2.75rem, 2rem + 3vw, 4rem); /* @kind other */
  --text-h1-lh:      1.06;
  --text-h2:         clamp(2.125rem, 1.7rem + 1.8vw, 3rem); /* @kind other */
  --text-h2-lh:      1.1;
  --text-h3:         clamp(1.625rem, 1.4rem + 1vw, 2rem); /* @kind other */
  --text-h3-lh:      1.16;
  --text-h4:         1.375rem;  /* 22 */
  --text-h4-lh:      1.3;
  --text-body-lg:    1.1875rem; /* 19 */
  --text-body-lg-lh: 1.65;
  --text-body:       1rem;      /* 16 */
  --text-body-lh:    1.7;
  --text-small:      0.875rem;  /* 14 */
  --text-small-lh:   1.55;
  --text-caption:    0.75rem;   /* 12 */
  --text-caption-lh: 1.45;

  /* ---- Letter-spacing ---- */
  --tracking-tight:  -0.02em;  /* large serif headings */
  --tracking-snug:   -0.01em;  /* sans headings */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* small labels */
  --tracking-caps:   0.14em;   /* eyebrow / overline, uppercase */

  /* ---- Measure (line length) — optimal reading is 60–75 characters.
     Apply with .t-measure* so paragraphs never run too wide. ---- */
  --measure-tight: 52ch;  /* @kind other */ /* short intros, captions */
  --measure-base:  66ch;  /* @kind other */ /* default running text */
  --measure-wide:  75ch;  /* @kind other */ /* dense docs / wide columns */

  /* ---- Semantic roles ---- */
  /* DISPLAY face — Big Shoulders Inline (inline-outline, condensed).
     RULE: display-only. Use ONLY for short, UPPERCASE Latin labels/numerals
     (hero word, big stat, section index). NEVER apply --font-display to
     Vietnamese running text or long headings — the inline-outline strokes make
     diacritics unreadable. For Vietnamese / general headings use --font-heading.
     Apply only through the guarded .t-display / .t-display-sm utilities below,
     not as a raw font-family on arbitrary headings. */
  --font-display: 'Big Shoulders Inline', 'Roboto Condensed', sans-serif;
  /* Heading face — Roboto Condensed (condensed grotesque). H1–H4 & UI titles.
     Be Vietnam Pro is the Vietnamese-safety fallback. */
  --font-heading: 'Roboto Condensed', 'Be Vietnam Pro', 'Inter', system-ui, sans-serif;
  /* Signature face — Playwrite Norge (handwriting). “Shaping Identity” signature line only. */
  --font-signature: 'Playwrite NO', 'Segoe Script', cursive;
  /* Vietnamese-first face — Be Vietnam Pro. Used where flawless VN diacritics lead. */
  --font-viet: 'Be Vietnam Pro', 'Inter', system-ui, sans-serif;
  --font-ui:      var(--font-sans);
  --font-body:    var(--font-sans);

  /* Optical settings for Fraunces */
  --serif-soft: 'SOFT' 0, 'WONK' 0; /* @kind other */
}

/* ---- Utility CLASSES live in tokens/type-roles.css ----
   The class layer (.t-display, .t-h1…h6, .t-body, .t-button, .t-quote,
   .t-signature, .t-tabular, …) is the implementation API. Apply ONE role
   class per text element instead of setting font-family/size directly.
   See guidelines/typography-strategy.md for the full element → role map. */