/* ═══════════════════════════════════════════════════════════════
   typography.css — KB Brand Typography
   Three-voice system: display (mono), structural (sans), metadata (mono)
   Dependencies: brand-tokens.css (font stacks, sizes, weights)
   Used by: all pages via base.njk <link>
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Space+Mono:wght@400;700&display=swap');

/* ══ Reset ══ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-text-primary, rgba(0, 0, 0, 0.85));
  background-color: var(--color-bg, #FFFFFF);
  /* overflow-x: hidden removed — html already propagates to viewport.
     Having it on body too creates a secondary scroll container (overflow-y
     implicitly becomes auto), which causes scroll-trap rubber-banding. */
  -webkit-text-size-adjust: 100%;
}
::selection { background: var(--teal-200); color: var(--dark-bg); }
img, svg { max-width: 100%; display: block; }

/* ══ Display Voice — DM Mono ══ */
h1, .text-display {
  font-family: var(--font-display);
  font-size: var(--text-display-fluid);
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

/* ══ Structural Voice — DM Sans ══ */
h2 {
  font-family: var(--font-body);
  font-size: var(--text-h2-fluid);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

h3 {
  font-family: var(--font-body);
  font-size: var(--text-h3-fluid);
  font-weight: var(--weight-semi);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

p, li {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
}

/* ══ Metadata Voice — Space Mono ══ */
.text-meta {
  font-family: var(--font-meta);
  font-size: var(--text-meta);
  color: var(--color-text-muted);
  line-height: var(--leading-body);
}

.text-small {
  font-family: var(--font-meta);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

.text-micro {
  font-family: var(--font-meta);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
}

/* ══ Links ══ */
a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-accent); }

/* ══ Strong ══ */
strong {
  font-weight: var(--weight-semi);
  color: var(--color-text-primary);
}

/* ══ Accent color class ══ */
.accent { color: var(--teal-500); }