/* UI_MIGRATION_PLAN.md F4 — baseline typography for the NEW design system.
   These are bare-tag rules (h1, p, a, ...) so they apply everywhere,
   including not-yet-migrated pages inside the .k-legacy wrapper — but
   legacy.css's own .k-legacy-scoped h1/h2/p rules are more specific and
   win there, so old pages are unaffected. New (non-.k-legacy) pages get
   these directly. Only 400/700 weights are used anywhere in the design
   (see UI_MIGRATION_PLAN.md F4 research notes). */

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--k-lh-heading, 1.2);
}

h1 {
  font-size: 1.75rem; /* 28px */
}

h2 {
  font-size: 1.375rem; /* 22px, section headings */
}

h3 {
  font-size: 1.0625rem; /* 17px, card titles */
}

p {
  margin: 0;
  line-height: var(--k-lh-body, 1.5);
}

a {
  color: var(--k-accent);
  text-decoration: none;
}

/* Text links only. Anything that renders as a filled control (.k-btn--*,
   .k-fab, .k-chip--*) MUST restate its colour in its own :hover rule, or
   this bare-tag rule wins over the component's non-hover colour: a class
   selector plus :hover beats an element selector plus :hover, but the
   component's plain `color` declaration does not.
   That bit once, invisibly: in light theme --k-ink and --k-primary are the
   same #16233F, so hovering a navy .k-btn--primary <a> painted its white
   label navy-on-navy and the text simply vanished. */
a:hover {
  color: var(--k-ink);
}

small,
.k-caption {
  font-size: 0.75rem;
  color: var(--k-soft);
}

/* Validation text. A modifier rather than an inline style so every error
   message reads the same and there's one place to change it. */
.k-caption--error {
  color: var(--k-warn);
  font-weight: 700;
}