/* ============================================================
   Urban Passport — Typography Tokens   ·   "Daylight"
   Space Grotesk for the display tier + counters, Hanken Grotesk
   for calm body/UI, Space Mono for codes. Modern, clean, a bit
   playful. The uppercase "label" (wide-ish tracking) tags
   categories and section eyebrows — lighter than the old
   engraved kicker, still a signature.
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif; /* @kind font */
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; /* @kind font */
  --font-mono:    'Space Mono', 'SFMono-Regular', ui-monospace, monospace; /* @kind font */

  /* ---- Numerals ---- */
  --num-tabular:  'tnum' 1, 'lnum' 1; /* @kind other */

  /* ---- Display tier (Space Grotesk) ---- */
  --text-hero:        clamp(2.2rem, 7vw, 3.25rem); /* @kind font */
  --text-hero-lh:     1.02; /* @kind other */
  --text-display:     2.25rem; /* @kind font */
  --text-display-lh:  2.4rem; /* @kind other */
  --text-title:       1.5rem; /* @kind font */
  --text-title-lh:    1.85rem; /* @kind other */
  --text-subtitle:    1.25rem; /* @kind font */
  --text-subtitle-lh: 1.6rem; /* @kind other */

  /* ---- Body tier (Hanken Grotesk) ---- */
  --text-lg:    1.0625rem; /* 17px — lead / sub-head                      */
  --text-base:  1rem;      /* 16px — body                                 */
  --text-sm:    0.875rem;  /* 14px — secondary / meta                     */
  --text-xs:    0.75rem;   /* 12px — caption                              */

  /* ---- Label (uppercase category / eyebrow — a brand signature) ---- */
  --text-label:        0.6875rem; /* @kind font */
  --label-tracking:    0.08em; /* @kind other */

  /* ---- Weights ---- */
  --w-regular:  400; /* @kind font */
  --w-medium:   500; /* @kind font */
  --w-semibold: 600; /* @kind font */
  --w-bold:     700; /* @kind font */
  --w-black:    800; /* @kind font */

  /* ---- Display weights (Space Grotesk) ---- */
  --wd-regular: 500; /* @kind font */
  --wd-semi:    600; /* @kind font */
  --wd-bold:    700; /* @kind font */

  /* ---- Tracking ---- */
  --tracking-display: -0.02em; /* @kind other */
  --tracking-body:     0; /* @kind other */
  --tracking-wide:     0.02em; /* @kind other */

  /* ---- LEGACY COMPAT (old "Atlas" type names → clean values) ---- */
  --text-kicker:     var(--text-label); /* @kind font */
  --kicker-tracking: var(--label-tracking); /* @kind other */
  --num-oldstyle:    'lnum' 1; /* @kind other */
  --wd-book:         500; /* @kind font */
  --text-hero-lh-legacy: 1.02; /* @kind other */
}

/* ---- Optional reusable type helpers (consumers may use directly) ---- */
.up-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--w-bold);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.up-display {
  font-family: var(--font-display);
  font-weight: var(--wd-semi);
  font-size: var(--text-display);
  line-height: var(--text-display-lh);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
}
.up-numeral {
  font-family: var(--font-display);
  font-weight: var(--wd-bold);
  font-feature-settings: var(--num-tabular);
  font-variant-numeric: tabular-nums lining-nums;
}