/* ============================================================
   BASE — light resets + element defaults bound to the tokens.
   Scoped utility-ish helpers consumers can lean on. Kept minimal.
   ============================================================ */
:root {
  color-scheme: light;
}

.bks-root,
body.bks {
  margin: 0;
  font-family: var(--bks-font-body);
  font-size: var(--bks-text-body);
  line-height: var(--bks-leading-normal);
  color: var(--bks-text);
  background: var(--bks-surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings inherit the display face + tight tracking */
.bks-root h1, .bks-root h2, .bks-root h3, .bks-root h4,
.bks h1, .bks h2, .bks h3, .bks h4 {
  font-family: var(--bks-font-display);
  color: var(--bks-text-strong);
  font-weight: var(--bks-weight-bold);
  letter-spacing: var(--bks-tracking-tight);
  line-height: var(--bks-leading-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

.bks-root p, .bks p { text-wrap: pretty; }

.bks-root a, .bks a {
  color: var(--bks-link);
  text-decoration: none;
  transition: color var(--bks-dur-fast) var(--bks-ease);
}
.bks-root a:hover, .bks a:hover { color: var(--bks-brand-hover); }

/* Reusable building-block helpers (optional) */
.bks-eyebrow {
  display: inline-block;
  font-size: var(--bks-text-eyebrow);
  font-weight: var(--bks-weight-bold);
  letter-spacing: var(--bks-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bks-brand);
}

.bks-container {
  width: 100%;
  max-width: var(--bks-container);
  margin-inline: auto;
  padding-inline: var(--bks-gutter);
  box-sizing: border-box;
}

:where(.bks-root, .bks) *:focus-visible {
  outline: none;
  box-shadow: var(--bks-focus-ring);
  border-radius: var(--bks-radius-xs);
}