/* MetalIQ — Typography tokens
 * Inter for UI everywhere. Fraunces reserved for brand/display.
 * Numbers always tabular.
 */
:root{
  --font-sans:'Inter','-apple-system','Segoe UI','Roboto','sans-serif';
  --font-display:'Fraunces','Georgia','serif';

  /* Type scale — size / line-height / weight */
  --fs-display:28px;    --lh-display:36px;    --fw-display:700;         /* @kind font */
  --fs-h1:20px;         --lh-h1:28px;         --fw-h1:600;              /* @kind font */
  --fs-h2:16px;         --lh-h2:24px;         --fw-h2:600;              /* @kind font */
  --fs-h3:14px;         --lh-h3:20px;         --fw-h3:600;              /* @kind font */
  --fs-body:14px;       --lh-body:20px;       --fw-body:400;            /* @kind font */
  --fs-body-strong:14px;--lh-body-strong:20px;--fw-body-strong:600;     /* @kind font */
  --fs-small:13px;      --lh-small:18px;      --fw-small:400;           /* @kind font */
  --fs-caption:12px;    --lh-caption:16px;    --fw-caption:400;         /* @kind font */
  --fs-number:14px;     --lh-number:20px;     --fw-number:500;          /* @kind font */

  /* Weights */
  --fw-regular:400;   /* @kind font */
  --fw-medium:500;    /* @kind font */
  --fw-semibold:600;  /* @kind font */
  --fw-bold:700;      /* @kind font */

  /* Tabular figures for prices/rates/weights */
  --tabular:"tnum" 1,"lnum" 1;   /* @kind other */
}

/* Utility classes for direct use in HTML/JSX */
.t-display{font-family:var(--font-sans);font-size:var(--fs-display);line-height:var(--lh-display);font-weight:var(--fw-display);letter-spacing:-0.01em}
.t-h1{font-family:var(--font-sans);font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:var(--fw-h1)}
.t-h2{font-family:var(--font-sans);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:var(--fw-h2)}
.t-h3{font-family:var(--font-sans);font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-h3)}
.t-body{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-body)}
.t-body-strong{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-body-strong)}
.t-small{font-family:var(--font-sans);font-size:var(--fs-small);line-height:var(--lh-small);font-weight:var(--fw-small)}
.t-caption{font-family:var(--font-sans);font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:var(--fw-caption)}
.t-number{font-family:var(--font-sans);font-size:var(--fs-number);line-height:var(--lh-number);font-weight:var(--fw-number);font-feature-settings:var(--tabular);font-variant-numeric:tabular-nums}
.t-brand-serif{font-family:var(--font-display);font-weight:var(--fw-semibold);letter-spacing:-0.01em}
.tabular{font-feature-settings:var(--tabular);font-variant-numeric:tabular-nums}