/* TYPO-56/60 (Codex reviews 0024/0025) — the ONE type system for site-managed
   text. THE NUMBERS LIVE ONLY IN THE CUSTOM PROPERTIES BELOW: the role
   classes, every flow consumer (via var()) and the generator/gate parser
   (tools/wix-clone/lib/typography-roles.mjs reads this file) all derive from
   this single table — there is no second copy of the numbers anywhere.
   Roles are assigned by text PURPOSE (declarations in
   data/wix-copy/typography-roles.json for pixel routes), never re-derived
   from captured sizes. Finite exceptions (review 0024): graphic logos/scans,
   the decorative 96px "404" figure, single-glyph close buttons, the
   cross-origin YCLIENTS/map iframes, and the compact Vita FAB (metadata
   numbers at weight 700). */
:root {
  --wx-font: arial, helvetica, sans-serif;
  --wx-c-text: #4d4d4d;
  --wx-c-heading: #2b2a2a;
  --wx-c-accent: #ab0535;
  --wx-c-secondary: #5f5c5c;

  /* role: font shorthand (weight size/line-height family), letter-spacing 0 */
  --wx-f-metadata:       400 14px/20px var(--wx-font);
  --wx-f-body:           400 16px/24px var(--wx-font);
  --wx-f-reading:        400 18px/28px var(--wx-font);
  --wx-f-control:        400 16px/24px var(--wx-font);
  --wx-f-control-strong: 700 16px/24px var(--wx-font);
  --wx-f-card-title:     700 20px/28px var(--wx-font);
  --wx-f-lead:           400 20px/28px var(--wx-font);
  --wx-f-h2:             700 24px/32px var(--wx-font);
  --wx-f-h1:             700 32px/40px var(--wx-font);
  --wx-f-display:        700 40px/48px var(--wx-font);
  --wx-f-display-mobile: 700 32px/40px var(--wx-font);
}
.t-metadata      { font: var(--wx-f-metadata); letter-spacing: 0; color: var(--wx-c-secondary); }
.t-body          { font: var(--wx-f-body); letter-spacing: 0; color: var(--wx-c-text); }
.t-reading       { font: var(--wx-f-reading); letter-spacing: 0; color: var(--wx-c-text); }
.t-control       { font: var(--wx-f-control); letter-spacing: 0; color: var(--wx-c-text); }
.t-control-strong{ font: var(--wx-f-control-strong); letter-spacing: 0; color: var(--wx-c-text); }
.t-card-title    { font: var(--wx-f-card-title); letter-spacing: 0; color: var(--wx-c-heading); }
.t-lead          { font: var(--wx-f-lead); letter-spacing: 0; color: var(--wx-c-text); }
.t-h2            { font: var(--wx-f-h2); letter-spacing: 0; color: var(--wx-c-heading); }
.t-h1            { font: var(--wx-f-h1); letter-spacing: 0; color: var(--wx-c-heading); }
.t-display       { font: var(--wx-f-display); letter-spacing: 0; color: var(--wx-c-heading); }
@media (max-width: 750.9px) {
  .t-display { font: var(--wx-f-display-mobile); }
}
/* the pixel MOBILE stage keeps the mobile display size at every viewport */
#wx-mobile .t-display { font: var(--wx-f-display-mobile); }
/* color modifiers — semantic, not per-page tweaks */
.t-accent  { color: var(--wx-c-accent); }
.t-onmedia { color: #ffffff; }