/*
 * Aquia house identity — type roles (system; identical under every skin).
 *
 * Every piece of text on a page is exactly one of these roles. A role fixes
 * family, size, weight, style, leading, tracking, case and colour together, so
 * nobody chooses them one by one. Use the class, or @extend/compose it; do not
 * restyle elements ad hoc. Rules and rationale: ../docs/3-typography.md.
 * This is the one file allowed literal sizes and leadings (rule T-2): a role
 * is where such a value is decided, once.
 *
 * Requires ./system.css and a skin (../skins/<name>/skin.css), or the combined
 * ../tokens/tokens.css.
 */

/* ── Display and headings: Newsreader, roman, never bold, never uppercase ── */

.t-display {
  /* One per site section at most: the hero statement. */
  font: var(--w-regular) clamp(var(--step-4), 1.5rem + 4.2vw, var(--step-6)) / var(--lh-display) var(--font-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  text-wrap: balance;
  max-width: 14ch;
}

.t-title {
  /* The h1 of an interior page: an essay, a paper, a lexicon entry. */
  font: var(--w-medium) clamp(var(--step-3), 1.4rem + 2.4vw, var(--step-4)) / var(--lh-title) var(--font-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  text-wrap: balance;
  max-width: 22ch;
}

.t-h2 {
  /* Section heading. */
  font: var(--w-regular) clamp(var(--step-2), 1.2rem + 1.6vw, var(--step-3)) / var(--lh-heading) var(--font-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  text-wrap: balance;
  max-width: 24ch;
}

.t-h3 {
  /* Sub-section heading. */
  font: var(--w-medium) var(--step-1) / var(--lh-subhead) var(--font-display);
  letter-spacing: var(--ls-normal);
  color: var(--ink);
  text-wrap: balance;
  max-width: 32ch;
}

.t-h4 {
  /* Minor or run-in heading. The only sans heading; the only semibold heading. */
  font: var(--w-semibold) var(--step-0) / var(--lh-ui) var(--font-text);
  letter-spacing: var(--ls-normal);
  color: var(--ink);
}

/* ── The label above a heading ─────────────────────────────────────────── */

.t-overline {
  /* Says what KIND of thing follows ("Notebook · 2026-07-03", "Study").
     Always directly above a heading, never alone, never a sentence. */
  font: var(--w-regular) var(--step--2) / var(--lh-ui) var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ash);
}

.t-overline + :is(.t-display, .t-title, .t-h2, .t-h3) {
  margin-top: var(--space-3);
}

/* ── Running text ──────────────────────────────────────────────────────── */

.t-lead {
  /* Standfirst: the one or two sentences under a title. Serif, ink (not ash). */
  font: var(--w-regular) var(--step-1) / var(--lh-lead) var(--font-display);
  color: var(--ink);
  max-width: var(--measure);
  text-wrap: pretty;
}

.t-body {
  font: var(--w-regular) var(--step-0) / var(--lh-body) var(--font-text);
  color: var(--ink);
  max-width: var(--measure);
  text-wrap: pretty;
}

.t-body-secondary {
  /* Supporting paragraph beside a stronger element (a card's description). */
  font: var(--w-regular) var(--step-0) / var(--lh-body) var(--font-text);
  color: var(--ash);
  max-width: var(--measure);
}

.t-reading {
  /* Optional long-form variant for essays: Newsreader at text size. Choose
     .t-body OR .t-reading for a whole publication, never both. */
  font: var(--w-regular) 1.1875rem / 1.62 var(--font-display);
  color: var(--ink);
  max-width: var(--measure);
  text-wrap: pretty;
}

.t-small {
  font: var(--w-regular) var(--step--1) / 1.5 var(--font-text);
  color: var(--ash);
}

.t-quote {
  /* Pull quote or stated premise. The identity's main use of italic. */
  font: italic var(--w-regular) var(--step-2) / 1.3 var(--font-display);
  color: var(--ink);
  max-width: 26ch;
  padding-left: var(--space-5);
  border-left: 2px solid var(--accent);
  text-wrap: balance;
}


.t-voice {
  /* The author's diary or field-note voice, set apart from the argument.
     Opens with a .t-voice-label. The only italic block in the identity. */
  font: italic var(--w-regular) var(--step-0) / 1.55 var(--font-display);
  color: var(--ink);
  max-width: var(--measure-narrow);
}

.t-voice-label {
  font: var(--w-regular) var(--step--2) / var(--lh-ui) var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold-text);
}

/* ── Figures, tables, data ─────────────────────────────────────────────── */

.t-figure-title {
  /* States the FINDING, as a sentence ("Waiting stops being free after day 3"). */
  font: var(--w-semibold) var(--step-0) / var(--lh-ui) var(--font-text);
  color: var(--ink);
  max-width: var(--measure);
}

.t-caption {
  /* How to read it, source, caveats. Begins with a .t-figure-number. */
  font: var(--w-regular) var(--step--1) / 1.5 var(--font-text);
  color: var(--ash);
  max-width: var(--measure);
}

.t-figure-number {
  font: var(--w-regular) var(--step--2) / var(--lh-ui) var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold-text);
  margin-right: var(--space-2);
}

.t-axis {
  /* Tick labels, axis titles, direct labels on a chart, leader-line labels. */
  font: var(--w-regular) var(--step--2) / 1.2 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--ash);
  fill: var(--ash);
}

.t-th {
  /* Table column header: same voice as the overline. */
  font: var(--w-regular) var(--step--2) / var(--lh-ui) var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ash);
  text-align: left;
}

.t-td {
  font: var(--w-regular) var(--step--1) / 1.45 var(--font-text);
  color: var(--ink);
}

.t-num {
  /* Any number meant to be compared: table cells, stats, dates, ids, versions. */
  font: var(--w-regular) var(--step--1) / 1.45 var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}

.t-stat {
  /* One large number that a sentence is about. Always with a .t-small gloss. */
  font: var(--w-regular) var(--step-4) / 1 var(--font-display);
  font-variant-numeric: lining-nums;
  letter-spacing: var(--ls-display);
  color: var(--accent);
}

.t-code {
  font: var(--w-regular) 0.9em / 1.5 var(--font-mono);
  background: var(--paper-2);
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
}

/* ── Interface ─────────────────────────────────────────────────────────── */

.t-ui {
  /* Buttons, navigation, tabs, form labels. */
  font: var(--w-semibold) var(--step--1) / var(--lh-ui) var(--font-text);
  letter-spacing: var(--ls-normal);
  color: var(--ink);
}

.t-nav {
  font: var(--w-medium) var(--step--1) / var(--lh-ui) var(--font-text);
  color: var(--ash);
  text-decoration: none;
}

.t-nav[aria-current],
.t-nav:hover {
  color: var(--ink);
}

.t-wordmark {
  /* The name of a site or publication in its header. */
  font: var(--w-regular) var(--step-1) / 1 var(--font-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  text-decoration: none;
}

.t-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.t-link:hover {
  color: var(--accent-soft);
  text-decoration-thickness: 2px;
}

/* ── Inline emphasis: the whole policy in four lines ───────────────────── */

em,
.t-em {
  font-style: italic; /* voice emphasis, titles of works, a term at its definition */
  font-weight: inherit;
}

strong,
.t-strong {
  font-weight: var(--w-semibold); /* sans text only; warnings and key terms in lists */
  font-style: normal;
}

:is(.t-display, .t-title, .t-h2, .t-h3, .t-lead, .t-quote, .t-reading) :is(strong, .t-strong) {
  font-weight: var(--w-medium); /* serif never goes above 500 */
}

/* On the dark band */
.on-dark :is(.t-display, .t-title, .t-h2, .t-h3, .t-h4, .t-lead, .t-body, .t-ui) {
  color: var(--on-dark);
}

.on-dark :is(.t-overline, .t-small, .t-caption, .t-body-secondary) {
  color: var(--on-dark-soft);
}

.on-dark .t-link {
  color: var(--accent-on-dark);
}

.on-dark :focus-visible {
  outline-color: var(--gold-on-dark);
}