/* ============================================================
   eSuite — Typography Tokens
   Typeface: Poppins. Headings semibold (600), body regular (400).
   The eTrackr guide specifies a pt scale (34/24/19/15/13pt);
   the values below are the on-screen px equivalents used across
   eSuite web UI, with a couple of larger display steps for
   marketing / dashboard hero use.
   ============================================================ */

:root {
  /* Families */
  --font-sans: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

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

  /* ---- Type scale (px) ----
     Mapped to the eTrackr guide:
     H1 34pt · H2 24pt · H3 19pt · H4 15pt · body 15pt · H5/button 13pt */
  --text-display:  44px; /* marketing / dashboard hero */
  --text-h1:       32px; /* page title — "My Students: Dashboard" */
  --text-h2:       24px; /* section heading — box titles */
  --text-h3:       19px; /* sub heading */
  --text-h4:       15px; /* body-copy heading (semibold) */
  --text-body:     15px; /* main body copy */
  --text-sm:       13px; /* table cells, button labels, dense UI */
  --text-xs:       12px; /* eyebrows, meta, hints, annotations — floor for readable secondary text */
  --text-2xs:      11px; /* micro labels, count badges — never for sentences */

  /* Role aliases */
  --text-dialog-title: var(--text-h3); /* Modal / dialog titles — 19px semibold */
  --text-h5:           var(--text-h4); /* h5 — 15px (overrides Bootstrap 20px) */
  --text-h6:           var(--text-sm); /* h6 — 13px (overrides Bootstrap 16px) */
  --text-group-label:  var(--text-sm); /* sentence-case group labels — 13px semibold, --text-muted */

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-annotation: 1.45; /* small secondary text — looser so 12px copy doesn't read cramped */

  /* Letter spacing */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;  /* eyebrows / uppercase labels — kept gentle; wide caps read mechanical */
  --tracking-wider:  0.06em;  /* section-header caps */
}

/* Heading levels below h4 map onto the scale (Bootstrap defaults are off-scale). */
h5, .h5 { font-size: var(--text-h5); font-weight: var(--weight-semibold); }
h6, .h6 { font-size: var(--text-h6); font-weight: var(--weight-semibold); }
