/* ============================================================
   Binding Chaos Encyclopedia — Base element styles & utilities
   ------------------------------------------------------------
   Light, opinionated resets that bind the tokens to real
   elements, plus a small set of typographic utility classes used
   across specimen cards, components, and UI kits. Kept minimal —
   the design system's weight lives in tokens and components.
   ============================================================ */

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

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

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

::selection { background: var(--accent-wash); color: var(--ink-1); }

a {
  color: var(--text-link);
  text-decoration: none;
  text-underline-offset: 2px;
}
a:hover { color: var(--text-link-hover); text-decoration: underline; }

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

hr {
  border: 0;
  border-top: 1px solid var(--border-hairline);
  margin: var(--space-8) 0;
}

/* ============================================================
   Typographic role utilities
   ============================================================ */
.bc-display { font-family: var(--type-display-font); font-size: var(--type-display-size); line-height: var(--type-display-leading); font-weight: var(--type-display-weight); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.bc-h1      { font-family: var(--type-h1-font); font-size: var(--type-h1-size); line-height: var(--type-h1-leading); font-weight: var(--type-h1-weight); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.bc-h2      { font-family: var(--type-h2-font); font-size: var(--type-h2-size); line-height: var(--type-h2-leading); font-weight: var(--type-h2-weight); color: var(--text-strong); }
.bc-h3      { font-family: var(--type-h3-font); font-size: var(--type-h3-size); line-height: var(--type-h3-leading); font-weight: var(--type-h3-weight); color: var(--text-strong); }
.bc-lead    { font-family: var(--type-lead-font); font-size: var(--type-lead-size); line-height: var(--type-lead-leading); font-weight: var(--type-lead-weight); color: var(--text-body); }
.bc-body    { font-family: var(--type-body-font); font-size: var(--type-body-size); line-height: var(--type-body-leading); font-weight: var(--type-body-weight); color: var(--text-body); }
.bc-ui      { font-family: var(--type-ui-font); font-size: var(--type-ui-size); line-height: var(--type-ui-leading); font-weight: var(--type-ui-weight); }
.bc-meta    { font-family: var(--type-meta-font); font-size: var(--type-meta-size); line-height: var(--type-meta-leading); font-weight: var(--type-meta-weight); color: var(--text-muted); }
.bc-mono    { font-family: var(--type-mono-font); font-size: var(--type-mono-size); line-height: var(--type-mono-leading); font-weight: var(--type-mono-weight); }

/* Spaced uppercase section label ("SHORT DEFINITION", "MEANING") */
.bc-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-leading);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.bc-measure { max-width: var(--measure-reading); }