/* ============================================================
   TYPOGRAPHY
   Headings: IBM Plex Sans · Body: Inter (both Google Fonts)
   The figure (the number) is the hero — it is set in IBM Plex
   Sans, bold, tight tracking. Eyebrows & labels are small,
   uppercase, wide-tracked.
   Font @import lives in styles.css (must precede all rules).
   ============================================================ */

:root {
  /* ---- Families ---- */
  --tt-font-heading: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --tt-font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* ---- Weights ---- */
  --tt-weight-regular: 400;
  --tt-weight-medium: 500;
  --tt-weight-semibold: 600;
  --tt-weight-bold: 700;

  /* ---- Type scale (rem) ---- */
  --tt-text-xs: 0.6875rem;   /* 11px — eyebrows, labels, chips */
  --tt-text-sm: 0.8125rem;   /* 13px */
  --tt-text-base: 0.9375rem; /* 15px — UI / form text */
  --tt-text-md: 1rem;        /* 16px */
  --tt-text-lg: 1.125rem;    /* 18px — lead paragraph */
  --tt-text-xl: 1.25rem;     /* 20px */
  --tt-text-2xl: 1.5rem;     /* 24px — small section heading */
  --tt-text-3xl: 1.875rem;   /* 30px — section heading */
  --tt-text-4xl: 2.25rem;    /* 36px */
  --tt-text-5xl: 3rem;       /* 48px — figures */
  --tt-text-6xl: 3.75rem;    /* 60px — hero figure */
  --tt-text-7xl: 4.5rem;     /* 72px — hero figure (large) */

  /* ---- Line heights ---- */
  --tt-leading-tight: 1.1;
  --tt-leading-snug: 1.3;
  --tt-leading-normal: 1.55;

  /* ---- Letter spacing ---- */
  --tt-tracking-tight: -0.02em;  /* headings & figures */
  --tt-tracking-normal: 0;
  --tt-tracking-wide: 0.06em;    /* small labels */
  --tt-tracking-wider: 0.12em;   /* eyebrows */
}