/* Typography. Two faces, weight inversion at the top (DESIGN.md §4).
   The px ramp below is the site's enumerated scale — every literal font-size
   in the source lands on one of these steps. Adding a step is a design
   decision, not a convenience. */

:root {
  /* ── Ramp ── */
  --ks-text-8: 0.5rem;      /* decorative micro-type */
  --ks-text-9: 0.5625rem;   /* dense chrome, viz ticks */
  --ks-text-10: 0.625rem;   /* overline, smallest legible caps */
  --ks-text-11: 0.6875rem;  /* eyebrow, badge, tag */
  --ks-text-12: 0.75rem;    /* meta lines, table chrome, inline code */
  --ks-text-13: 0.8125rem;  /* secondary UI text, card meta */
  --ks-text-14: 0.875rem;   /* dense body, list rows, controls */
  --ks-text-15: 0.9375rem;  /* long-form secondary text */
  --ks-text-16: 1rem;       /* default body */
  --ks-text-18: 1.125rem;   /* lead paragraph, card heading */
  --ks-text-20: 1.25rem;    /* card and panel titles */
  --ks-text-24: 1.5rem;
  --ks-text-28: 1.75rem;
  --ks-text-32: 2rem;
  --ks-text-40: 2.5rem;
  --ks-text-48: 3rem;
  --ks-text-56: 3.5rem;
  --ks-text-64: 4rem;
  --ks-text-72: 4.5rem;
  --ks-text-80: 5rem;
  --ks-text-88: 5.5rem;

  /* ── Dense UI ramp (extension surfaces). 11px is the functional floor. ── */
  --ks-type-micro: 11px;
  --ks-type-label: 12px;
  --ks-type-ui: 13px;

  /* ── Roles ── */
  --ks-display-family: var(--ks-font-display);
  --ks-display-size: clamp(3.4rem, 6.5vw, 5.6rem);
  --ks-display-weight: 100; /* @kind other */
  --ks-display-lh: 1.02; /* @kind other */
  --ks-display-ls: -0.01em; /* @kind other */

  --ks-headline-family: var(--ks-font-display);
  --ks-headline-size: clamp(2.6rem, 4vw, 3.4rem);
  --ks-headline-weight: 300; /* @kind other */
  --ks-headline-lh: 1.04; /* @kind other */

  --ks-title-size: var(--ks-text-18);
  --ks-title-weight: 500; /* @kind other */
  --ks-title-lh: 1.35; /* @kind other */

  --ks-body-size: var(--ks-text-16);
  --ks-body-weight: 400; /* @kind other */
  --ks-body-lh: 1.8; /* @kind other */
  --ks-body-measure: 70ch; /* @kind other */

  --ks-eyebrow-size: var(--ks-text-11);
  --ks-eyebrow-weight: 500; /* @kind other */
  --ks-eyebrow-ls: 0.18em; /* @kind other */

  --ks-mono-label-size: var(--ks-text-11);
  --ks-mono-label-weight: 500; /* @kind other */
  --ks-mono-label-ls: 0.22em; /* @kind other */

  --ks-wordmark-size: var(--ks-text-18);
  --ks-wordmark-weight: 400; /* @kind other */
  --ks-wordmark-ls: 0.15em; /* @kind other */
}