/* ===========================================================================
   MUNAR — Typography tokens
   Display: Neue Haas Grotesk Display (→ Arimo / Helvetica fallback)
   Reading: IBM Plex Sans
   =========================================================================== */

:root {
  /* Families */
  --font-display: 'Neue Haas Grotesk Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans:    'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

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

  /* Type scale — size / line-height / tracking (from brand reference) */
  --display-size: 64px;  --display-lh: 64px;  --display-track: -0.02em;
  --h1-size: 48px;       --h1-lh: 52px;       --h1-track: -0.02em;
  --h2-size: 36px;       --h2-lh: 40px;       --h2-track: -0.01em;
  --h3-size: 24px;       --h3-lh: 30px;       --h3-track: -0.01em;
  --h4-size: 20px;       --h4-lh: 26px;       --h4-track: -0.005em;
  --body-lg-size: 18px;  --body-lg-lh: 28px;
  --body-size: 16px;     --body-lh: 24px;
  --body-sm-size: 14px;  --body-sm-lh: 20px;
  --caption-size: 13px;  --caption-lh: 18px;
  --label-size: 12px;    --label-lh: 16px;    --label-track: 0.08em;

  /* Semantic roles */
  --text-display-font: var(--font-display);
  --text-heading-font: var(--font-display);
  --text-body-font:    var(--font-sans);
  --text-label-font:   var(--font-sans);
  --text-numeric-font: var(--font-sans);  /* IBM Plex tabular figures */
}

/* Optional helper classes (consumers may use tokens directly instead) */
.munar-display {
  font-family: var(--font-display);
  font-size: var(--display-size);
  line-height: var(--display-lh);
  letter-spacing: var(--display-track);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.munar-h1 { font-family: var(--font-display); font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-track); font-weight: var(--weight-semibold); color: var(--text-primary); }
.munar-h2 { font-family: var(--font-display); font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-track); font-weight: var(--weight-semibold); color: var(--text-primary); }
.munar-h3 { font-family: var(--font-display); font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-track); font-weight: var(--weight-medium); color: var(--text-primary); }
.munar-body { font-family: var(--font-sans); font-size: var(--body-size); line-height: var(--body-lh); font-weight: var(--weight-regular); color: var(--text-primary); }
.munar-label {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  line-height: var(--label-lh);
  letter-spacing: var(--label-track);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  color: var(--text-muted);
}