/* ===========================================================================
   TeamReach — Typography tokens
   ---------------------------------------------------------------------------
   Faces:
   - --font-display : brand wordmark sans (fr-bold). Headlines, marketing,
     section titles. Geometric, rounded, confident.
   - --font-varsity : collegiate outlined display (fr-title). Sporty marketing
     accents only — jersey numbers, big athletic callouts.
   - --font-ui      : the product UI face. The native mobile app renders in the
     platform system font, so this mirrors it for faithful app recreations.

   Type scale mirrors apps/mobile/src/lib/theme.ts `typography` (sp values),
   extended upward with marketing display sizes.
   =========================================================================== */

:root {
  --font-display: 'TeamReach Sans', 'Arial Black', system-ui, sans-serif;
  --font-varsity: 'TeamReach Varsity', Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Product type scale (px ≈ app sp) */
  --text-xxs: 10px;   /* micro labels */
  --text-xs: 12px;    /* captions, timestamps, meta */
  --text-sm: 13px;    /* secondary body */
  --text-base: 14px;  /* default body */
  --text-md: 16px;    /* section headers, input text */
  --text-lg: 18px;    /* card titles */
  --text-xl: 20px;    /* screen titles */
  --text-2xl: 24px;   /* hero / large header */
  --text-3xl: 28px;   /* display */

  /* Marketing display sizes (web headline scale) */
  --display-sm: 40px;
  --display-md: 56px;
  --display-lg: 80px;
  --display-xl: 120px;

  /* Weights — the brand sans ships bold only; UI uses native weights */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */

  /* Line heights */
  --lh-tight: 1.05; /* @kind other */
  --lh-snug: 1.25; /* @kind other */
  --lh-body: 1.45; /* @kind other */

  /* Tracking */
  --tracking-tight: -0.02em; /* @kind other */
  --tracking-normal: 0; /* @kind other */
  --tracking-label: 0.04em; /* @kind other */
  --tracking-wide: 0.08em; /* @kind other */
}