/* ===========================================================================
   Tragitto — Typography tokens
   Display: Playfair Display (high-contrast serif) — headings, trip names
   Italic accent: Playfair Display Italic — timeline dates ("junho · hoje")
   UI / Body: Mulish (humanist sans) — interface, body, numerals
   =========================================================================== */

:root {
  /* Families */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Mulish", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* Weights */
  --fw-regular:   400;  /* @kind other */
  --fw-medium:    500;  /* @kind other */
  --fw-semibold:  600;  /* @kind other */
  --fw-bold:      700;  /* @kind other */
  --fw-display:   700;  /* @kind other */  /* Playfair headings */
  --fw-display-black: 800;  /* @kind other */

  /* Fluid type scale (UI is mobile-first; px values map to a 4px rhythm) */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;
  --text-4xl:  44px;
  --text-5xl:  56px;

  /* Line heights */
  --leading-tight:   1.12;
  --leading-snug:    1.25;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em;   /* eyebrow / overline labels */

  /* --- Semantic roles ---------------------------------------------------- */
  --display-font:    var(--font-display);
  --display-weight:  var(--fw-display);
  --display-leading: var(--leading-tight);

  --heading-font:    var(--font-display);
  --body-font:       var(--font-sans);
  --label-font:      var(--font-sans);

  /* Eyebrow / overline (e.g. "PASSO 1 DE 2") */
  --eyebrow-size:    var(--text-xs);
  --eyebrow-weight:  var(--fw-bold);
  --eyebrow-tracking:var(--tracking-caps);
}

/* Convenience type classes — used in specimen cards & kits */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.t-display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-medium);
  color: var(--text-brand);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
}
.t-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}