/* ============================================================
   kinship mfg — Base element defaults & typographic roles
   ------------------------------------------------------------
   Light-touch element resets so a bare page already feels
   "kinship", plus the named TYPE ROLES.

   Roles mirror the Type → Roles card 1:1. Each role bundles
   font + weight + size + line-height + tracking into one class.
   Display/headings use Satoshi and scale fluidly; reading roles
   use Newsreader; UI/label/button roles use Satoshi.
   Tokens must be imported before this file.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Base headings (element-level convenience) ─────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a {
  color: var(--text-accent);
  text-decoration: none;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-active); text-decoration: underline; }

strong, b { font-weight: var(--weight-bold); color: var(--text-strong); }
small { font-size: var(--text-sm); }

hr {
  border: 0;
  border-top: var(--border-width) solid var(--border-subtle);
  margin: var(--space-7) 0;
}

::selection { background: var(--cinnabar-200); color: var(--ink-900); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   TYPE ROLES — one class = font + weight + size + lh + tracking
   ============================================================ */

/* ── Display — Satoshi, fluid, tight tracking (headlines only) ─ */
.km-display-2xl {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--display-2xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tighter);
}
.km-display-xl {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--display-xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tighter);
}
.km-display-lg {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--display-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.km-display-md {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--display-md);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

/* ── Heading / Subheading — Satoshi, fluid ─────────────────── */
.km-heading {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
}
.km-subheading {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-tight);
}

/* ── Reading roles — Newsreader (the companion / body voice) ── */
.km-body-lg {
  font-family: var(--font-reading);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
}
.km-body {
  font-family: var(--font-reading);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}
.km-body-sm {
  font-family: var(--font-reading);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* ── UI roles — Satoshi (interface, not reading) ───────────── */
.km-ui {
  font-family: var(--font-ui);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.km-annotation {
  font-family: var(--font-ui);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}
.km-label {
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.km-button {
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: 1;
  letter-spacing: var(--tracking-button);
}

/* ── Legacy / convenience helpers (kept; alias the roles) ──── */
.km-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}
.km-lead {
  font-family: var(--font-reading);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
.km-editorial {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}