/* ============================================================
   TYPOGRAPHY — Deep Espresso Editorial
   Headlines: Bricolage Grotesque (tight tracking, heavy weight)
   Body:      Geist (technical, legible sans)
   Labels:    Space Mono (ALWAYS uppercase + generous tracking)
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  --font-body: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ---- Type scale (role tokens) ---- */
  /* display-xl */
  --display-xl-size: 72px;
  --display-xl-weight: 800;
  --display-xl-line: 1.0; /* @kind other */
  --display-xl-tracking: -0.04em;

  /* headline-lg */
  --headline-lg-size: 48px;
  --headline-lg-weight: 700;
  --headline-lg-line: 1.1; /* @kind other */
  --headline-lg-tracking: -0.02em;

  /* headline-lg-mobile */
  --headline-lg-mobile-size: 32px;

  /* headline-md */
  --headline-md-size: 32px;
  --headline-md-weight: 600;
  --headline-md-line: 1.2; /* @kind other */
  --headline-md-tracking: -0.01em;

  /* body-lg */
  --body-lg-size: 20px;
  --body-lg-weight: 400;
  --body-lg-line: 1.6; /* @kind other */

  /* body-md */
  --body-md-size: 16px;
  --body-md-weight: 400;
  --body-md-line: 1.6; /* @kind other */

  /* label-sm — mono, uppercase */
  --label-sm-size: 12px;
  --label-sm-weight: 400;
  --label-sm-line: 1.0; /* @kind other */
  --label-sm-tracking: 0.1em;

  /* footer-caps — mono, uppercase */
  --footer-caps-size: 14px;
  --footer-caps-weight: 400;
  --footer-caps-line: 1.2; /* @kind other */
  --footer-caps-tracking: 0.05em;
}

/* ------------------------------------------------------------
   Optional utility classes (components may use tokens directly)
   ------------------------------------------------------------ */
.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--display-xl-size);
  font-weight: var(--display-xl-weight);
  line-height: var(--display-xl-line);
  letter-spacing: var(--display-xl-tracking);
}
.t-headline-lg {
  font-family: var(--font-display);
  font-size: var(--headline-lg-size);
  font-weight: var(--headline-lg-weight);
  line-height: var(--headline-lg-line);
  letter-spacing: var(--headline-lg-tracking);
}
.t-headline-md {
  font-family: var(--font-display);
  font-size: var(--headline-md-size);
  font-weight: var(--headline-md-weight);
  line-height: var(--headline-md-line);
  letter-spacing: var(--headline-md-tracking);
}
.t-body-lg {
  font-family: var(--font-body);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-line);
}
.t-body-md {
  font-family: var(--font-body);
  font-size: var(--body-md-size);
  line-height: var(--body-md-line);
}
.t-label-sm {
  font-family: var(--font-mono);
  font-size: var(--label-sm-size);
  letter-spacing: var(--label-sm-tracking);
  text-transform: uppercase;
}
.t-footer-caps {
  font-family: var(--font-mono);
  font-size: var(--footer-caps-size);
  letter-spacing: var(--footer-caps-tracking);
  text-transform: uppercase;
}