/* Text styles — Figma "Spparco" 1VOuppOLAw675Zcm55UHaA, node 449:373.
 * Extracted spec: design/typography/typography.md.
 *
 * Shared by app/ and landing-page/, the same way tokens.css is. Separate from
 * tokens.css because it is a different kind of thing: tokens.css declares
 * values, this file spends them. A text style is Figma's unit of "type you
 * apply", and the honest CSS translation of one is a class, not a variable.
 *
 * Every declaration below resolves to a *semantic* token. If a style needs a
 * value that no semantic token carries, the fix is a new semantic token, not
 * a literal here and not a --type-* primitive reached for directly.
 *
 * Figma names them "Title / Display", "Body / Large" and so on; the class
 * names are those, flattened. There is no Label / Small — the table stops at
 * two label sizes, so this file does too.
 */

/* ---- Titles ------------------------------------------------------------- */
/* All six are strong (800) on tight leading. Only Display tracks negative:
 * at 60px the default spacing reads loose, and nothing below 48px does. */

.text-title-display,
.text-title-h1,
.text-title-h2,
.text-title-h3,
.text-title-h4,
.text-title-h5 {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-strong);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-default);
}

.text-title-display {
  font-size: var(--font-size-5xl);
  letter-spacing: var(--letter-spacing-tight);
}

.text-title-h1 { font-size: var(--font-size-4xl); }
.text-title-h2 { font-size: var(--font-size-3xl); }
.text-title-h3 { font-size: var(--font-size-2xl); }
.text-title-h4 { font-size: var(--font-size-xl); }
.text-title-h5 { font-size: var(--font-size-lg); }

/* ---- Body --------------------------------------------------------------- */
/* Regular weight, positive tracking throughout. Small opens its leading a
 * further step — 12px running text needs the room that 14 and 16 don't. */

.text-body-lg,
.text-body-md,
.text-body-sm {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-default);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-relaxed);
}

.text-body-lg { font-size: var(--font-size-md); }
.text-body-md { font-size: var(--font-size-sm); }

.text-body-sm {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

/* ---- Labels ------------------------------------------------------------- */
/* A label is a single line inside a control, so it takes the tightest leading
 * and the emphasis weight. The tracking stays open — the one thing labels and
 * body copy agree on.
 *
 * These are not what .ds-button wears. The button predates this scale and is
 * still drawn in Inter at weight 500; see the note in tokens.css and gaps 17
 * and 18 in CLAUDE.md. */

.text-label-lg,
.text-label-md {
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-emphasis);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-relaxed);
}

.text-label-lg { font-size: var(--font-size-md); }
.text-label-md { font-size: var(--font-size-sm); }

/* NOT IN FIGMA — Label / Small.
 *
 * The label ramp in node 449:373 stops at two sizes, md and sm. The app's
 * labels are mostly smaller than either: list rows, chips, badges, counts and
 * column heads all sit at 10-12px. Without an xs label they would each pick
 * their own weight and leading, which is the situation the text styles exist
 * to end.
 *
 * So this is the ramp continued by its own rule rather than a new idea: Large
 * → Medium drops one size and changes nothing else, and Small does the same
 * again. If Figma draws a real Label / Small, replace this — don't keep both. */
.text-label-sm {
  font-family: var(--font-family-default);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-emphasis);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-relaxed);
}