/* ============================================================
   TAMGA — Typography tokens
   Families, fluid display scale, weights, tracking.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: "Steppe Sans", "Futura PT", system-ui, sans-serif;  /* poster titles, section names */
  --font-eyebrow: "Futura PT", "Steppe Sans", system-ui, sans-serif;  /* kickers, wide-tracked labels */
  --font-ui:      "Gilroy", "Futura PT", system-ui, sans-serif;       /* headings, buttons, nav       */
  --font-body:    "Myriad Pro", "Gilroy", system-ui, sans-serif;      /* interface / web body         */
  --font-serif:   "Berlingske Serif", Georgia, serif;                 /* editorial / book body, quotes*/
  --font-mono:    "Source Code", "OCR B", ui-monospace, monospace;    /* figures, footnote refs       */
  --font-rune:    "Old Turkic", serif;                                /* decorative runic texture only*/

  /* ---- Type scale (fluid, rem) — hero poster → section ---- */
  --fs-display-xl: clamp(3.5rem, 7vw, 6.5rem); /* @kind font */
  --fs-display-l:  clamp(2.5rem, 5vw, 4rem); /* @kind font */
  --fs-display-m:  clamp(1.9rem, 3.4vw, 2.75rem);/* @kind font */
  --fs-h1: 2.25rem;   /* @kind font */
  --fs-h2: 1.75rem;   /* @kind font */
  --fs-h3: 1.375rem;  /* @kind font */
  --fs-h4: 1.125rem;  /* @kind font */
  --fs-body-lg: 1.1875rem; /* @kind font */
  --fs-body:    1rem;       /* @kind font */
  --fs-sm:      0.875rem;   /* @kind font */
  --fs-xs:      0.75rem;    /* @kind font */
  --fs-eyebrow: 0.8125rem;  /* @kind font */

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

  /* ---- Line heights ---- */
  --lh-tight:   1.04; /* @kind font */
  --lh-snug:    1.22; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.68; /* @kind font */

  /* ---- Tracking ---- the brand leans on WIDE letterspacing for caps */
  --tr-display: 0.04em;  /* @kind font */
  --tr-eyebrow: 0.42em;  /* @kind font */
  --tr-caps:    0.18em;  /* @kind font */
  --tr-label:   0.08em;  /* @kind font */
  --tr-body:    0;       /* @kind font */
}

/* ---- Convenience role classes (optional; tokens are the source of truth) ---- */
.t-poster-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--text-display);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
}
.t-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--text-display);
  text-transform: uppercase;
}
.t-eyebrow {
  font-family: var(--font-eyebrow);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: var(--fw-medium);
}
.t-heading {
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--text-display);
}
.t-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-primary);
}
.t-serif {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--tr-label);
  color: var(--text-secondary);
}