/* ============================================================
   SEITH — component stylesheet
   Loaded after tokens.css. Every token value lives in tokens.json
   (compiled to tokens.css); what stays here is what tokens.json
   does not declare: font loading, composite borders, motion, and
   the non-token parts of the semantic type classes.
   ============================================================ */


:root {
  /* ---------- BORDERS ---------- */
  --border-hairline: 1px solid var(--color-rail); /* @kind other */
  --border-hairline-paper: 1px solid var(--color-paper-line); /* @kind other */

  /* ---------- MOTION ---------- */
  --ease:        cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --dur-micro:   120ms; /* @kind other */
  --dur-panel:   200ms; /* @kind other */
  --dur-page:    320ms; /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE CLASSES — family, size, weight, line height and
   tracking come from tokens.css; these add the rest.
   ============================================================ */

.h-display { text-transform: uppercase; }
.h1 { text-transform: uppercase; }
.h2 { text-transform: uppercase; }

.eyebrow {
  text-transform: uppercase;
  color: var(--color-petrol);
}

.label-caps { text-transform: uppercase; }

.mono, .data, code, .tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-mono);
}

.metric { font-variant-numeric: tabular-nums; }