/* ====================================================================
   IO-CORE · TYPOGRAPHY  (the dictatorship)
   ====================================================================
   Five sizes. No exceptions. If you reach for `font-size: 13px`,
   `font-size: 11px`, or — god help you — `font-size: 8px` ANYWHERE
   outside this file, you are wrong. Pick the nearest --io-fs-* and
   live with it. The whole point of a scale is to never have to
   negotiate sizes again.

   Anchor: --io-fs-base = 16px (body default).
   The four others ladder out from there. No fractional pixels.
   Each size is paired with a line-height — never use them apart.
   ==================================================================== */

:root {
  /* Type scale (px). Locked, monotonic, 5 steps. */
  --io-fs-micro: 12px;
  --io-fs-sm:    14px;
  --io-fs-base:  16px;
  --io-fs-lg:    20px;
  --io-fs-xl:    24px;

  /* Line-heights — paired 1:1 to each size. Tighter as type gets larger. */
  --io-lh-micro: 1.45;
  --io-lh-sm:    1.5;
  --io-lh-base:  1.55;
  --io-lh-lg:    1.4;
  --io-lh-xl:    1.2;
}

/* ====================================================================
   APPLIED — closes the heading loophole.
   Any raw <h1>..<h6> in the codebase hits the scale. No browser
   defaults sneaking 32px or 10.72px through the cracks.
   ==================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--io-text-primary);
  font-weight: 600;
}

h1 { font-size: var(--io-fs-xl);    line-height: var(--io-lh-xl); }
h2 { font-size: var(--io-fs-lg);    line-height: var(--io-lh-lg); }
h3 { font-size: var(--io-fs-base);  line-height: var(--io-lh-base); }
h4 { font-size: var(--io-fs-sm);    line-height: var(--io-lh-sm);
     text-transform: uppercase; letter-spacing: 0.04em; }
h5 { font-size: var(--io-fs-micro); line-height: var(--io-lh-micro);
     text-transform: uppercase; letter-spacing: 0.06em;
     color: var(--io-text-secondary); }
h6 { font-size: var(--io-fs-micro); line-height: var(--io-lh-micro);
     text-transform: uppercase; letter-spacing: 0.06em;
     color: var(--io-text-tertiary); }

p {
  margin: 0;
  font-size: var(--io-fs-base);
  line-height: var(--io-lh-base);
}

small {
  font-size: var(--io-fs-sm);
  line-height: var(--io-lh-sm);
}

code, pre, kbd, samp {
  font-family: var(--io-font-mono);
  font-size: 0.95em;  /* relative — stays proportional to whatever the parent size is */
}

/* ====================================================================
   UTILITIES — opt-in size targeting for non-heading elements.
   For the cases where semantics say "div" but you still need a
   sanctioned size. Pick one. Don't write a raw font-size.
   ==================================================================== */

.io-fs-micro { font-size: var(--io-fs-micro); line-height: var(--io-lh-micro); }
.io-fs-sm    { font-size: var(--io-fs-sm);    line-height: var(--io-lh-sm); }
.io-fs-base  { font-size: var(--io-fs-base);  line-height: var(--io-lh-base); }
.io-fs-lg    { font-size: var(--io-fs-lg);    line-height: var(--io-lh-lg); }
.io-fs-xl    { font-size: var(--io-fs-xl);    line-height: var(--io-lh-xl); }