/* ============================================================
   TEMBO — Typography tokens
   Voice: bold, condensed, industrial. ALL-CAPS display, tight
   tracking on headlines, technical condensed for data + UI.
   ============================================================ */

:root {
  /* ---- Families ------------------------------------------ */
  /* Display — Zuume Cut (substitute: Anton). Headlines, all-caps. */
  --font-display: 'Anton', 'Saira Condensed', 'Arial Narrow', sans-serif;
  /* Condensed — Acumin Pro Extra Condensed (substitute: Saira Condensed).
     Subheads, eyebrows, labels, data, UI chrome. */
  --font-condensed: 'Saira Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  /* Body — supporting companion for longer reading copy. */
  --font-body: 'Barlow Semi Condensed', 'Saira Condensed', system-ui, sans-serif;
  /* Mono — telemetry / spec readouts. */
  --font-mono: 'Saira Condensed', ui-monospace, 'SFMono-Regular', monospace;

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

  /* ---- Type scale (px) — minor-third-ish, condensed ------ */
  --fs-eyebrow:  13px;
  --fs-label:    14px;
  --fs-body-sm:  15px;
  --fs-body:     17px;
  --fs-body-lg:  20px;
  --fs-h6:       20px;
  --fs-h5:       26px;
  --fs-h4:       34px;
  --fs-h3:       46px;
  --fs-h2:       62px;
  --fs-h1:       84px;
  --fs-display:  120px;  /* poster headlines */

  /* ---- Line heights -------------------------------------- */
  --lh-tight:   0.92;   /* @kind font */
  --lh-snug:    1.05;   /* @kind font */
  --lh-heading: 1.1;    /* @kind font */
  --lh-body:    1.5;    /* @kind font */
  --lh-relaxed: 1.6;    /* @kind font */

  /* ---- Letter spacing ------------------------------------ */
  --ls-display:  -0.01em;  /* @kind font */
  --ls-heading:  0.005em;  /* @kind font */
  --ls-eyebrow:  0.18em;   /* @kind font */
  --ls-label:    0.06em;   /* @kind font */
  --ls-body:     0.005em;  /* @kind font */
}

/* ============================================================
   Optional helper classes (foundations / specimens). Product
   components should map these onto the variables above.
   ============================================================ */

.t-eyebrow {
  font-family: var(--font-condensed);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-accent);
}

.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.t-h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--ls-display); }
.t-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-heading); text-transform: uppercase; }
.t-h3 { font-family: var(--font-condensed); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-heading); text-transform: uppercase; letter-spacing: var(--ls-heading); }
.t-h4 { font-family: var(--font-condensed); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-heading); text-transform: uppercase; letter-spacing: var(--ls-heading); }

.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.t-label {
  font-family: var(--font-condensed);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.t-data {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}