/* ============================================================
   TYPOGRAPHY
   One family carries the whole hierarchy. Hierarchy comes from
   size + weight + negative tracking, never family change.
   Display runs weight 500 with tracking that scales with size.
   ============================================================ */

:root {
  /* Families (Inter substitutes for proprietary Saans) */
  --font-display: 'Inter', 'Saans Fallback', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', 'Saans Fallback', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SaansMono Fallback', ui-monospace, monospace;

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

  /* --- Type scale (size / line-height / tracking) --- */
  --type-display-xl-size: 72px;
  --type-display-xl-lh: 1.05;
  --type-display-xl-ls: -2px;

  --type-display-lg-size: 56px;
  --type-display-lg-lh: 1.10;
  --type-display-lg-ls: -1.4px;

  --type-display-md-size: 40px;
  --type-display-md-lh: 1.15;
  --type-display-md-ls: -0.8px;

  --type-headline-size: 28px;
  --type-headline-lh: 1.20;
  --type-headline-ls: -0.5px;

  --type-card-title-size: 22px;
  --type-card-title-lh: 1.25;
  --type-card-title-ls: -0.3px;

  --type-subhead-size: 20px;
  --type-subhead-lh: 1.40;
  --type-subhead-ls: -0.2px;

  --type-body-lg-size: 18px;
  --type-body-lg-lh: 1.50;
  --type-body-lg-ls: -0.1px;

  --type-body-size: 16px;
  --type-body-lh: 1.50;
  --type-body-ls: 0;

  --type-body-sm-size: 14px;
  --type-body-sm-lh: 1.50;
  --type-body-sm-ls: 0;

  --type-caption-size: 12px;
  --type-caption-lh: 1.40;
  --type-caption-ls: 0;

  --type-button-size: 15px;
  --type-button-lh: 1.20;
  --type-button-ls: 0;

  --type-eyebrow-size: 14px;
  --type-eyebrow-lh: 1.30;
  --type-eyebrow-ls: 0;

  --type-mono-size: 13px;
  --type-mono-lh: 1.50;
  --type-mono-ls: 0;
}

/* ------------------------------------------------------------
   Optional utility classes — convenient shorthands that bundle
   each step. Components may also read the raw vars directly.
   ------------------------------------------------------------ */
.t-display-xl {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-lh);
  letter-spacing: var(--type-display-xl-ls);
}
.t-display-lg {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-lh);
  letter-spacing: var(--type-display-lg-ls);
}
.t-display-md {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--type-display-md-size); line-height: var(--type-display-md-lh);
  letter-spacing: var(--type-display-md-ls);
}
.t-headline {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--type-headline-size); line-height: var(--type-headline-lh);
  letter-spacing: var(--type-headline-ls);
}
.t-card-title {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--type-card-title-size); line-height: var(--type-card-title-lh);
  letter-spacing: var(--type-card-title-ls);
}
.t-subhead {
  font-family: var(--font-body); font-weight: var(--fw-regular);
  font-size: var(--type-subhead-size); line-height: var(--type-subhead-lh);
  letter-spacing: var(--type-subhead-ls);
}
.t-body-lg {
  font-family: var(--font-body); font-weight: var(--fw-regular);
  font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-lh);
  letter-spacing: var(--type-body-lg-ls);
}
.t-body {
  font-family: var(--font-body); font-weight: var(--fw-regular);
  font-size: var(--type-body-size); line-height: var(--type-body-lh);
  letter-spacing: var(--type-body-ls);
}
.t-body-sm {
  font-family: var(--font-body); font-weight: var(--fw-regular);
  font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh);
  letter-spacing: var(--type-body-sm-ls);
}
.t-caption {
  font-family: var(--font-body); font-weight: var(--fw-regular);
  font-size: var(--type-caption-size); line-height: var(--type-caption-lh);
  letter-spacing: var(--type-caption-ls);
}
.t-eyebrow {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-size: var(--type-eyebrow-size); line-height: var(--type-eyebrow-lh);
  letter-spacing: var(--type-eyebrow-ls);
}
.t-mono {
  font-family: var(--font-mono); font-weight: var(--fw-regular);
  font-size: var(--type-mono-size); line-height: var(--type-mono-lh);
  letter-spacing: var(--type-mono-ls);
}