/* ============================================================
   Sinh Vũ — Type roles (utility layer)  ·  THE IMPLEMENTATION API
   ------------------------------------------------------------
   ONE class = the complete, correct treatment (family + size +
   weight + line-height + tracking + case). Implementers apply a
   role class and never pick raw font/size values — this is how the
   system stays consistent across a premium site.

   FOUR working voices + TWO special:
     DISPLAY   Big Shoulders Inline  → .t-display* / .t-numeral   (UPPERCASE Latin ONLY)
     HEADING   Roboto Condensed      → .t-h1…h6 / .t-title / .t-overline
     BODY/UI   Inter                 → .t-lead / .t-body* / .t-label / .t-button / .t-nav / .t-meta
     EDITORIAL Fraunces              → .t-quote / .t-serif-lead / .t-em
     SIGNATURE Playwrite Norge       → .t-signature        (the "Shaping Identity" line ONLY)
     NUMERIC   Inter tabular         → .t-tabular / .t-mono

   HARD RULES (the source of most implementation bugs):
   1. DISPLAY is Latin-only and auto-UPPERCASE. NEVER put Vietnamese,
      long text, or sentence-case in .t-display* — diacritics break.
      Any heading that may contain Vietnamese → use .t-h* / .t-title.
   2. Body copy is ALWAYS Inter (.t-body). Never a heading/display face.
   3. Signature face is for the tagline signature only — nothing else.
   4. Don't set font-family/size directly on text; pick the nearest role.
   5. DISPLAY/NUMERAL min size = 28px. Big Shoulders Inline breaks below ~28px
      (inline-outline strokes collapse). For small numbers/labels use
      .t-tabular (Inter) or Roboto Condensed bold instead.
   ============================================================ */

/* ---------- DISPLAY · Big Shoulders Inline (UPPERCASE Latin only) ---------- */
.t-display {
  font-family: var(--font-display);
  font-size: var(--text-display);              /* 56 → 80 */
  line-height: 0.96;
  letter-spacing: 0.01em;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}
.t-display-sm {
  font-family: var(--font-display);
  font-size: var(--text-h1);                   /* 44 → 64 */
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}
/* Big numerals / stats — tabular figures, no uppercase needed for digits.
   MIN SIZE 28px — never render Big Shoulders Inline smaller (strokes break);
   for small data use .t-tabular instead. */
.t-numeral {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: 1;
  letter-spacing: 0.01em;
  font-weight: var(--weight-bold);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ---------- HEADING · Roboto Condensed (all H levels, VN-safe) ---------- */
.t-h1 { font-family: var(--font-heading); font-size: var(--text-h1); line-height: var(--text-h1-lh); font-weight: var(--weight-bold);     letter-spacing: var(--tracking-snug); }
.t-h2 { font-family: var(--font-heading); font-size: var(--text-h2); line-height: var(--text-h2-lh); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.t-h3 { font-family: var(--font-heading); font-size: var(--text-h3); line-height: var(--text-h3-lh); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.t-h4 { font-family: var(--font-heading); font-size: var(--text-h4); line-height: var(--text-h4-lh); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); }
.t-h5 { font-family: var(--font-heading); font-size: 1.125rem; line-height: 1.35; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); }
.t-h6 { font-family: var(--font-heading); font-size: 1rem; line-height: 1.4; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
/* Card / panel / dialog titles — the workhorse UI title */
.t-title    { font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.3; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.t-subtitle { font-family: var(--font-sans);    font-size: var(--text-small); line-height: 1.5; font-weight: var(--weight-regular); color: var(--text-secondary); }

/* ---------- OVERLINE / EYEBROW · Inter caps ---------- */
.t-overline, .t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* ---------- BODY / UI · Inter ---------- */
.t-lead    { font-family: var(--font-body); font-size: var(--text-body-lg); line-height: var(--text-body-lg-lh); font-weight: var(--weight-regular); color: var(--text-secondary); }
.t-body    { font-family: var(--font-body); font-size: var(--text-body);    line-height: var(--text-body-lh);    font-weight: var(--weight-regular); }
.t-body-sm { font-family: var(--font-body); font-size: var(--text-small);   line-height: var(--text-small-lh);   font-weight: var(--weight-regular); }
.t-caption { font-family: var(--font-body); font-size: var(--text-caption); line-height: var(--text-caption-lh); font-weight: var(--weight-regular); color: var(--text-secondary); }
.t-meta    { font-family: var(--font-body); font-size: var(--text-caption); line-height: 1.4; font-weight: var(--weight-medium); color: var(--text-secondary); }
/* Form & UI labels */
.t-label   { font-family: var(--font-body); font-size: var(--text-small); line-height: 1.4; font-weight: var(--weight-semibold); }
/* Interactive text */
.t-button  { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1; font-weight: var(--weight-semibold); letter-spacing: 0.005em; }
.t-nav     { font-family: var(--font-body); font-size: var(--text-small); line-height: 1; font-weight: var(--weight-medium); }
.t-link    { font-family: var(--font-body); font-weight: var(--weight-semibold); color: var(--text-accent); text-decoration: none; }
.t-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- NUMERIC · tabular figures (tables, prices, stats, data) ---------- */
.t-tabular { font-family: var(--font-body); font-feature-settings: 'tnum' 1, 'lnum' 1; font-variant-numeric: tabular-nums lining-nums; }
.t-mono    { font-family: var(--font-mono); font-size: var(--text-small); line-height: 1.5; }

/* ---------- EDITORIAL · Roboto Condensed (large condensed quote) ----------
   Quotes use the heading voice (distinct from body) — the editorial signal is
   scale + condensed character + a Signal-Red quote mark. No contrasting serif. */
.t-quote {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.3;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
}
.t-serif-lead {
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  font-weight: var(--weight-regular);
}
/* Inline accent — handwritten signature face for an emphasised word.
   LATIN ONLY (Playwrite Norge has no Vietnamese diacritics) — use on
   English accent words; for Vietnamese emphasis use weight/color instead. */
.t-em { font-family: var(--font-signature); font-weight: var(--weight-regular); color: var(--text-brand); text-transform: none; }

/* ---------- SIGNATURE · Playwrite Norge (the tagline signature ONLY) ---------- */
.t-signature {
  font-family: var(--font-signature);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.5;
  font-weight: var(--weight-regular);
}

/* ---------- VIETNAMESE-FIRST · Be Vietnam Pro ---------- */
/* Use on long Vietnamese running text where its diacritic rhythm reads best,
   or to pin VN content independent of the body face. */
.t-vn { font-family: var(--font-viet); }

/* ---------- Modifiers ---------- */
.t-balance { text-wrap: balance; }
.t-pretty  { text-wrap: pretty; }
.t-tight   { letter-spacing: var(--tracking-tight); }
.t-nowrap  { white-space: nowrap; }
.t-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Measure (line length) — keep running text 60–75 chars ---------- */
.t-measure       { max-width: var(--measure-base); }
.t-measure-tight { max-width: var(--measure-tight); }
.t-measure-wide  { max-width: var(--measure-wide); }

/* ---------- PROSE · long-form rich text (CMS, docs, proposals, case studies) ----------
   Wrap one .prose on a content block; every child element inherits the correct
   role, rhythm and measure. The fix for "applying type into real modules". */
.prose { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--text-body-lh);
  color: var(--text-primary); max-width: var(--measure-base); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-family: var(--font-heading); font-size: var(--text-h3); line-height: var(--text-h3-lh);
  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); margin-top: 1.8em; }
.prose h3 { font-family: var(--font-heading); font-size: var(--text-h4); line-height: var(--text-h4-lh);
  font-weight: var(--weight-semibold); margin-top: 1.5em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.5em; }
.prose p, .prose ul, .prose ol { font-size: var(--text-body); line-height: var(--text-body-lh); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose a { color: var(--text-accent); font-weight: var(--weight-semibold); text-decoration: none; }
.prose a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: var(--weight-semibold); }
.prose blockquote { font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--weight-medium);
  line-height: 1.35; border-left: 2px solid var(--accent); padding-left: 18px; color: var(--text-primary); }
.prose code { font-family: var(--font-mono); font-size: 0.875em; background: var(--surface-paper);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 1px 6px; }
.prose small { font-size: var(--text-small); color: var(--text-secondary); }