/* ============================================================
   ARTS MERCANTILE — TYPOGRAPHY TOKENS
   Per the brand type spec (2024 guidelines p.16, Heavy → Light usage). Four
   distinct families; Barlow carries two of the five listed roles:
   1. Staatliches            — HEAVIEST use. Super-headlines + sub-headlines.
   2. Barlow Semi Condensed  — workhorse. Headlines, subheads, UI, body, quotes.
   3. Radley (serif, +ital)  — editorial body & pull-quotes.
   4. Rubik Mono One         — LIGHTEST use. Blocky SUPERHEADER + big numerals (e.g. "460").
   Kicker / eyebrow labels are Barlow caps with wide tracking (not the mono face).
   ============================================================ */
:root {
  /* —— Families —— */
  --font-display: "Staatliches", "Barlow Semi Condensed", system-ui, sans-serif;
  --font-sans:    "Barlow Semi Condensed", system-ui, -apple-system, sans-serif;
  --font-super:   "Rubik Mono One", "Staatliches", sans-serif;  /* blocky superheader — sparingly */
  --font-mono:    "Rubik Mono One", monospace;                  /* alias of --font-super */
  --font-serif:   "Radley", "Iowan Old Style", Georgia, serif;

  /* —— Type scale (1.250 major-third-ish, signage runs big) —— */
  --text-2xs:  11px;
  --text-xs:   13px;
  --text-sm:   15px;
  --text-base: 17px;
  --text-md:   20px;
  --text-lg:   24px;
  --text-xl:   32px;
  --text-2xl:  44px;
  --text-3xl:  60px;
  --text-4xl:  84px;
  --text-5xl:  116px;
  --text-6xl:  160px;

  /* —— Weights (Barlow carries the range; display faces are single-weight) —— */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semi:    600; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* —— Line height —— */
  --lh-solid:   0.92; /* @kind font */  /* stacked display lockups */
  --lh-tight:   1.05; /* @kind font */
  --lh-snug:    1.2; /* @kind font */
  --lh-normal:  1.45; /* @kind font */
  --lh-relaxed: 1.6; /* @kind font */

  /* —— Tracking — display caps want air, mono kickers want a lot —— */
  --ls-display: 0.01em; /* @kind font */
  --ls-tight:   -0.01em; /* @kind font */
  --ls-normal:  0; /* @kind font */
  --ls-wide:    0.06em; /* @kind font */
  --ls-kicker:  0.18em; /* @kind font */  /* mono / caps eyebrow labels */

  /* ============================================================
     SEMANTIC ROLES
     ============================================================ */
  --type-display:  var(--lh-solid) var(--font-display);
  --type-heading:  var(--fw-bold) var(--lh-tight) var(--font-sans);
  --type-body:     var(--fw-regular) var(--lh-normal) var(--font-sans);
  --type-serif:    var(--fw-regular) var(--lh-relaxed) var(--font-serif);
  --type-kicker:   var(--fw-semi) var(--lh-snug) var(--font-sans); /* caps + --ls-kicker tracking */
  --type-super:    var(--lh-solid) var(--font-super);
}

/* Optional helper classes — components may also just use the vars */
.am-display { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-solid); letter-spacing: var(--ls-display); text-transform: uppercase; }
.am-kicker  { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs); letter-spacing: var(--ls-kicker); text-transform: uppercase; }
.am-super   { font-family: var(--font-super); text-transform: uppercase; line-height: var(--lh-solid); }
.am-serif-italic { font-family: var(--font-serif); font-style: italic; }