/* ============================================================
   myMedCrew · Typography
   Two families, clear jobs:
   · Bricolage Grotesque — display, headlines, wordmark
   · IBM Plex Sans       — body, UI, long-form
   · IBM Plex Mono       — eyebrows, labels, specs, data
   Left-aligned by default. Never justify. Emphasis = bold or
   Teal Deep — never italic/underline in headings.
   ============================================================ */

:root {
  /* ---- Families (with brand-specified fallback stacks) --- */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Weights ------------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-display:  800; /* big statements */

  /* ---- Modular type scale -------------------------------- */
  /* Display · Bricolage 800 · 64–128px · -2% tracking */
  --text-display:    clamp(3.5rem, 5.5vw, 8rem);
  --text-h1:         2.875rem; /* 46px · Bricolage 700 */
  --text-h2:         1.875rem; /* 30px · Bricolage 600 */
  --text-h3:         1.375rem; /* 22px · Bricolage 600 (subhead) */
  --text-lead:       1.1875rem;/* 19px · Plex Sans 400 · 1.5 lh */
  --text-body:       0.9375rem;/* 15px · Plex Sans 400 · 1.6 lh — default read */
  --text-small:      0.8125rem;/* 13px */
  --text-label:      0.75rem;  /* 12px · Plex Mono 500 · +14% · UPPER */
  --text-label-sm:   0.6875rem;/* 11px */

  /* ---- Line heights -------------------------------------- */
  --lh-display: 1.02; /* @kind other */
  --lh-tight:   1.1;  /* @kind other */
  --lh-heading: 1.15; /* @kind other */
  --lh-lead:    1.5;  /* @kind other */
  --lh-body:    1.6;  /* @kind other */

  /* ---- Tracking ------------------------------------------ */
  --tracking-display: -0.02em;  /* -2% */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-label:   0.14em;   /* +14% for mono eyebrows/labels */

  /* ---- Measure (line length) ----------------------------- */
  --measure: 68ch; /* keep body 60–75 characters */
}

/* ---- Optional ergonomic helpers (opt-in classes) -------- */
.mmc-display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.mmc-h1 { font-family: var(--font-display); font-weight: var(--weight-bold);     font-size: var(--text-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.mmc-h2 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h2); line-height: var(--lh-heading); }
.mmc-h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-h3); line-height: var(--lh-tight); }
.mmc-lead { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-lead); line-height: var(--lh-lead); }
.mmc-body { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-body); line-height: var(--lh-body); }
.mmc-label {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}