/* ============================================================
   HRmaps Design System — TYPOGRAPHY
   Typeface: Roboto (product standard). Roboto Mono for tabular data.
   Base size 14px (dense SaaS). Tighter scale + sharper weight
   contrast than the legacy UI for clearer hierarchy.
   ============================================================ */

:root {
  /* families */
  --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* type scale (px) */
  --text-xs:   12px;   /* meta, captions, table sublabels */
  --text-sm:   13px;   /* secondary text, dense tables */
  --text-base: 14px;   /* body / default UI text */
  --text-md:   15px;
  --text-lg:   16px;   /* card titles, section labels */
  --text-xl:   18px;
  --text-2xl:  20px;   /* page subtitles */
  --text-3xl:  24px;   /* page titles, KPI values */
  --text-4xl:  30px;   /* big KPI numbers */
  --text-5xl:  38px;   /* hero / dashboard headline figures */

  /* line-heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* letter-spacing */
  --tracking-tight:  -0.01em;   /* large headings */
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.06em;    /* uppercase eyebrow labels */

  /* ---- ROLE TOKENS (compose family + size + weight + leading) ---- */
  --font-display:  var(--weight-bold) var(--text-5xl)/var(--leading-tight) var(--font-sans);
  --font-h1:       var(--weight-bold) var(--text-3xl)/var(--leading-tight) var(--font-sans);
  --font-h2:       var(--weight-medium) var(--text-2xl)/var(--leading-snug) var(--font-sans);
  --font-h3:       var(--weight-medium) var(--text-lg)/var(--leading-snug) var(--font-sans);
  --font-body:     var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans);
  --font-body-sm:  var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --font-label:    var(--weight-medium) var(--text-sm)/var(--leading-snug) var(--font-sans);
  --font-meta:     var(--weight-regular) var(--text-xs)/var(--leading-snug) var(--font-sans);
  --font-button:   var(--weight-medium) var(--text-base)/1 var(--font-sans);
}