/* ═══════════════════════════════════════════════════════════════════════════
   PRISM type scale — the single source for every font size in the app.
   Loaded by style.css (@import) and directly by standalone pages (sign-in,
   password reset, landing). Don't redefine these tokens anywhere else.

     28 display   page titles (h1)
     24 metric    big numbers (stat tiles, scores)
     20 title     section headings (h2)
     18 subtitle  large card titles
     16 heading   panel / card titles (h3), tabs
     14 body      paragraphs, list items, inputs, buttons
     13 small     secondary text, meta lines, descriptions
     12 caption   UPPERCASE labels, eyebrows, chips
     11 micro     badges, counters, canvas node labels

   Use the role tokens (--t-*) in new CSS. The older --fs-* names are aliases
   onto the same steps. Sizes of 32px and up are reserved for marketing
   headlines and display numerals.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --t-display:  28px;
  --t-metric:   24px;
  --t-title:    20px;
  --t-subtitle: 18px;
  --t-heading:  16px;
  --t-body:     14px;
  --t-small:    13px;
  --t-caption:  12px;
  --t-micro:    11px;

  --fs-micro:   var(--t-micro);
  --fs-xss:     var(--t-caption);
  --fs-xs:      var(--t-small);
  --fs-sm:      var(--t-body);
  --fs-base:    var(--t-body);
  --fs-ui:      var(--t-body);
  --fs-md:      var(--t-heading);
  --fs-subhead: var(--t-heading);
  --fs-lg:      var(--t-subtitle);
  --fs-xl:      var(--t-title);
  --fs-2xl:     var(--t-metric);
  --fs-xxl:     var(--t-display);
}

/* ── Element defaults ──────────────────────────────────────────────────────
   :where() keeps specificity at zero, so any component class still wins;
   these only apply where nothing else sets a size. */
body { font-size: var(--t-body); line-height: 1.5; }
:where(h1) { font-size: var(--t-display); line-height: 1.2; }
:where(h2) { font-size: var(--t-title); line-height: 1.3; }
:where(h3) { font-size: var(--t-heading); line-height: 1.35; }
:where(h4, h5, h6) { font-size: var(--t-body); line-height: 1.4; }
:where(p, li, td, th, label, input, select, textarea, button) { font-size: inherit; }
:where(small) { font-size: var(--t-small); }