@layer utilities {
  /* One job per class, one token per class. Naming: {property}-{token},
     where the token is the name from tokens.css without its leading
     dashes (.text-xs → --text-xs, .color-text-muted → --color-text-muted).

     Only utilities that markup uses live here. Add one when a template needs
     it, rather than writing the same single declaration into a block.

     Note the layer order: blocks come after utilities, so a block that sets
     the same property on the same element wins over the utility. */

  /* ── Font family ─────────────────────────────────────────────── */
  .font-display {
    font-family: var(--font-display);
  }
  .font-body {
    font-family: var(--font-body);
  }
  .font-label {
    font-family: var(--font-label);
  }
  .font-hand {
    font-family: var(--font-hand);
  }

  /* ── Font size ───────────────────────────────────────────────── */
  .text-xs {
    font-size: var(--text-xs);
  }
  .text-sm {
    font-size: var(--text-sm);
  }
  .text-base {
    font-size: var(--text-base);
  }
  .text-md {
    font-size: var(--text-md);
  }
  .text-lg {
    font-size: var(--text-lg);
  }
  .text-xl {
    font-size: var(--text-xl);
  }
  .text-2xl {
    font-size: var(--text-2xl);
  }
  .text-3xl {
    font-size: var(--text-3xl);
  }

  /* ── Text colour ─────────────────────────────────────────────── */
  .color-text {
    color: var(--color-text);
  }
  .color-text-prose {
    color: var(--color-text-prose);
  }
  .color-text-muted {
    color: var(--color-text-muted);
  }
  .color-text-faint {
    color: var(--color-text-faint);
  }
  .color-accent {
    color: var(--color-accent);
  }
  .color-accent-strong {
    color: var(--color-accent-strong);
  }
  .color-danger {
    color: var(--color-danger);
  }
  .color-on-primary {
    color: var(--color-on-primary);
  }

  /* ── Background ──────────────────────────────────────────────── */
  .bg-raised {
    background: var(--color-bg-raised);
  }
  .bg-primary {
    background: var(--color-primary);
  }

  /* ── Letter spacing ──────────────────────────────────────────── */
  .tracking-tight {
    letter-spacing: var(--tracking-tight);
  }
  .tracking-wide {
    letter-spacing: var(--tracking-wide);
  }
  .tracking-wider {
    letter-spacing: var(--tracking-wider);
  }

  /* ── Weight ──────────────────────────────────────────────────── */
  .weight-normal {
    font-weight: var(--weight-normal);
  }
  .weight-medium {
    font-weight: var(--weight-medium);
  }
  .weight-semi {
    font-weight: var(--weight-semi);
  }
  .weight-bold {
    font-weight: var(--weight-bold);
  }

  /* ── Line height ─────────────────────────────────────────────── */
  .leading-none {
    line-height: var(--leading-none);
  }
  .leading {
    line-height: var(--leading);
  }

  /* ── Radius ──────────────────────────────────────────────────── */
  .radius-m {
    border-radius: var(--radius-m);
  }
  .radius-full {
    border-radius: var(--radius-full);
  }

  /* ── Measure ─────────────────────────────────────────────────── */
  .measure {
    max-inline-size: var(--measure);
  }

  /* ── Keyword utilities (no token) ────────────────────────────── */
  .uppercase {
    text-transform: uppercase;
  }
  .text-center {
    text-align: center;
  }
  .line-through {
    text-decoration: line-through;
  }
  .italic {
    font-style: italic;
  }
  .not-italic {
    font-style: normal;
  }
}