/* ============================================================
   LOCALACT — Typography   ·  DESIGN-SYSTEM.md §4b
   ------------------------------------------------------------
   "One font per job." Three families, three roles — never swap:
     --la-font-display → Jost   (Century Gothic) → headlines, NEVER body
     --la-font-ui      → Carlito (Calibri)        → UI, labels, data, default body
     --la-font-body    → Georgia                  → long-form editorial

   Type scale uses the composite `font` shorthand: weight size/line-height family.
   Namespace split: --la-typography-* = type styles · --la-text-* = text COLORS.
   Weights restricted to the loaded faces (Jost 400/500/600/700, Carlito 400/700).
   ============================================================ */

:root {
  /* Families (substitute first for cross-OS consistency; brand font trails). */
  --la-font-display: Jost, "Century Gothic", Futura, "Trebuchet MS", sans-serif;
  --la-font-ui:      Carlito, Calibri, "Segoe UI", system-ui, -apple-system, sans-serif;
  --la-font-body:    Georgia, "Times New Roman", serif;
  --la-font-mono:    ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale — composite shorthand (weight size/line-height family). */
  --la-typography-h1: 700 2.125rem/1.2  var(--la-font-display); /* 34px — page title */
  --la-typography-h2: 700 1.625rem/1.25 var(--la-font-display); /* 26px — section/card title */
  --la-typography-h3: 700 1.25rem/1.3   var(--la-font-display); /* 20px */
  --la-typography-h4: 600 1.125rem/1.35 var(--la-font-display); /* 18px */
  --la-typography-h5: 600 1rem/1.4      var(--la-font-display); /* 16px */
  --la-typography-h6: 600 0.875rem/1.45 var(--la-font-display); /* 14px */
  --la-typography-subtitle: 600 1rem/1.4       var(--la-font-ui); /* 16px — emphasis / location name */
  --la-typography-body:     400 0.875rem/1.5   var(--la-font-ui); /* 14px — default body, nav, buttons */
  --la-typography-caption:  400 0.75rem/1.45   var(--la-font-ui); /* 12px — meta, sublabels */
  --la-typography-label:    600 0.6875rem/1.35 var(--la-font-ui); /* 11px — eyebrows (apply uppercase + tracking in component) */

  /* Data — dense UI numerics / tabular values (semibold, tight LH). Reuses the
     14px body size on purpose — only weight + line-height differ from body. */
  --la-typography-data:     600 0.875rem/1.4   var(--la-font-ui); /* 14px — table cells, inline data emphasis */

  /* Metric — large standalone display numbers (KPIs, scores). Display font,
     LH ~1 (numerals read best without extra leading). DELIBERATE ~1.25 ramp
     (24 → 30 → 38 → 48), independent of the heading scale — never mix the two. */
  --la-typography-metric-sm: 600 1.5rem/1.1    var(--la-font-display); /* 24px — secondary / inline KPI */
  --la-typography-metric:    700 1.875rem/1    var(--la-font-display); /* 30px — standard KPI value */
  --la-typography-metric-lg: 700 2.375rem/1    var(--la-font-display); /* 38px — featured metric */
  --la-typography-metric-xl: 700 3rem/1        var(--la-font-display); /* 48px — hero metric (e.g. LocalScore) */

  /* Letter-spacing helpers (the `font` shorthand can't carry tracking). */
  --la-tracking-label: 0.14em; /* eyebrows / overlines */
  --la-tracking-wide:  0.08em;
  --la-tracking-display: 0.01em;
}