/* ============================================================
   xmesh DS · _type.css — type role shorthands + helper classes.

   The actual MD3 typescale lives in `md3/_type.css`. This file
   composes the MD3 sub-tokens into `font:`-shorthand role aliases
   (`--t-h1`, `--t-body`, …) and renders the `.x-*` helper classes
   that previews use. The shorthands let component CSS write
   `font: var(--t-body);` in one line — there's no MD3 equivalent,
   so the composition lives here.

   Family + raw-size tokens stay defined for the few callsites that
   reference them directly; component CSS should prefer the role
   shorthands or the MD3 sub-tokens.
   ============================================================ */

/* ---------- Families, weights, raw scale ---------- */
:root {
  --t-family-display: "Source Serif 4", "Newsreader", "Cormorant Garamond", "EB Garamond", "Tiempos Headline", Georgia, serif;
  --t-family-ui:      "Inter",  -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --t-family-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-weight-regular:  400;
  --t-weight-medium:   500;
  --t-weight-semibold: 600;
  --t-weight-bold:     700;

  --t-size-xs:   11px;
  --t-size-sm:   12px;
  --t-size-base: 13px;
  --t-size-md:   15px;
  --t-size-lg:   16px;
  --t-size-xl:   18px;
  --t-size-2xl:  18px;
  --t-size-3xl:  22px;
  --t-size-4xl:  28px;
  --t-size-5xl:  34px;

  --t-leading-tight:  1.2;
  --t-leading-snug:   1.35;
  --t-leading-normal: 1.5;
  --t-leading-loose:  1.7;

  --t-tracking-tight:  -0.02em;
  --t-tracking-snug:   -0.01em;
  --t-tracking-normal: 0;
  --t-tracking-wide:   0.04em;

  --t-features: "ss01", "cv11";
}

/* ---------- Role shorthand — composes MD3 typescale sub-tokens ----------
   `font:` order is `weight size/line-height family`. Each role binds to
   the matching MD3 role (display-small, body-large, etc.) so the values
   flow from md3/_type.css. */
:root {
  --t-h1:
    var(--md-sys-typescale-display-small-weight)
    var(--md-sys-typescale-display-small-size) /
    var(--md-sys-typescale-display-small-line-height)
    var(--md-sys-typescale-display-small-font);

  --t-h2:
    var(--md-sys-typescale-headline-large-weight)
    var(--md-sys-typescale-headline-large-size) /
    var(--md-sys-typescale-headline-large-line-height)
    var(--md-sys-typescale-headline-large-font);

  --t-h3:
    var(--md-sys-typescale-headline-medium-weight)
    var(--md-sys-typescale-headline-medium-size) /
    var(--md-sys-typescale-headline-medium-line-height)
    var(--md-sys-typescale-headline-medium-font);

  --t-h4:
    var(--md-sys-typescale-title-large-weight)
    var(--md-sys-typescale-title-large-size) /
    var(--md-sys-typescale-title-large-line-height)
    var(--md-sys-typescale-title-large-font);

  --t-display:
    var(--md-sys-typescale-headline-medium-weight)
    var(--md-sys-typescale-headline-medium-size) /
    var(--md-sys-typescale-headline-medium-line-height)
    var(--md-sys-typescale-headline-medium-font);

  --t-wordmark:
    var(--xm-typescale-wordmark-weight)
    var(--xm-typescale-wordmark-size) /
    var(--xm-typescale-wordmark-line-height)
    var(--xm-typescale-wordmark-font);

  --t-eyebrow:
    var(--md-sys-typescale-label-small-weight)
    var(--md-sys-typescale-label-small-size) /
    var(--md-sys-typescale-label-small-line-height)
    var(--md-sys-typescale-label-small-font);

  --t-body:
    var(--md-sys-typescale-body-large-weight)
    var(--md-sys-typescale-body-large-size) /
    var(--md-sys-typescale-body-large-line-height)
    var(--md-sys-typescale-body-large-font);

  --t-body-strong:
    var(--md-sys-typescale-title-medium-weight)
    var(--md-sys-typescale-body-large-size) /
    var(--md-sys-typescale-body-large-line-height)
    var(--md-sys-typescale-body-large-font);

  --t-small:
    var(--md-sys-typescale-body-small-weight)
    var(--md-sys-typescale-body-small-size) /
    var(--md-sys-typescale-body-small-line-height)
    var(--md-sys-typescale-body-small-font);

  --t-button:
    var(--md-sys-typescale-label-large-weight)
    var(--md-sys-typescale-label-large-size) /
    var(--md-sys-typescale-label-large-line-height)
    var(--md-sys-typescale-label-large-font);

  --t-mono:
    var(--xm-typescale-mono-weight)
    var(--xm-typescale-mono-size) /
    var(--xm-typescale-mono-line-height)
    var(--xm-typescale-mono-font);
}

/* ---------- Helper classes ---------- */
.x-h1       { font: var(--t-h1);       color: var(--c-text);       letter-spacing: var(--t-tracking-tight); margin: 0; }
.x-h2       { font: var(--t-h2);       color: var(--c-text);       letter-spacing: var(--t-tracking-tight); margin: 0; }
.x-h3       { font: var(--t-h3);       color: var(--c-text);       letter-spacing: var(--t-tracking-snug);  margin: 0; }
.x-h4       { font: var(--t-h4);       color: var(--c-text);       letter-spacing: var(--t-tracking-snug);  margin: 0; }
.x-display  { font: var(--t-display);  color: var(--c-text);       letter-spacing: var(--t-tracking-snug);  margin: 0; }
.x-wordmark { font: var(--t-wordmark); color: var(--c-text);       letter-spacing: var(--t-tracking-snug);  margin: 0; }
.x-body    { font: var(--t-body);    color: var(--c-text-body);  margin: 0; }
.x-small   { font: var(--t-small);   color: var(--c-text-muted); margin: 0; }
.x-eyebrow { font: var(--t-eyebrow); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: var(--t-tracking-wide); margin: 0; }
.x-mono    { font: var(--t-mono);    color: var(--c-text-body); }