/* ════════════════════════════════════════════════════════════════
   TBD — Typography tokens
   Geologica (display) + Inter (body/UI). Headings sit in navy,
   tight tracking; body in ink, comfortable 1.5–1.6 leading.
   Web sizes use clamp(); social/print scales live in the readme.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Families */
  --font-display: "Geologica", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

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

  /* ── Web type scale (fluid) ─────────────────────────────────── */
  --type-display-xl: 700 clamp(44px, 5vw, 70px)/1.04 var(--font-display);   /* hero H1 */
  --type-display:    700 clamp(40px, 5vw, 62px)/1.04 var(--font-display);   /* page H1 */
  --type-h2:         700 clamp(30px, 3.6vw, 44px)/1.10 var(--font-display); /* section H2 */
  --type-h3:         700 clamp(24px, 2.4vw, 32px)/1.20 var(--font-display);
  --type-h4:         700 20px/1.22 var(--font-display);
  --type-lede:       400 19px/1.6 var(--font-body);
  --type-body-lg:    400 17px/1.62 var(--font-body);
  --type-body:       400 16px/1.5 var(--font-body);
  --type-body-sm:    400 14.5px/1.55 var(--font-body);
  --type-caption:    400 13px/1.4 var(--font-body);

  /* Tracking */
  --track-display: -0.02em;   /* large display */
  --track-tight:   -0.01em;   /* H2 */
  --track-normal:  0; /* @kind font */
  --track-eyebrow:  0.14em;   /* uppercase kicker */
  --track-label:    0.10em;   /* uppercase labels */

  /* Eyebrow / kicker — uppercase, gradient-filled, 13px 600 */
  --type-eyebrow: var(--fw-semibold) 13px/1 var(--font-body);
}