/* ───────────────────────────────────────────────────────────
   BASE — light resets + element defaults.
   Scoped to opt-in via .as-root so cards/kits can apply brand
   defaults without globally hijacking the Design System chrome.
   ─────────────────────────────────────────────────────────── */
.as-root {
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.as-root h1, .as-root h2, .as-root h3, .as-root h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  margin: 0;
  letter-spacing: var(--ls-display);
}
.as-root p { margin: 0; }
.as-root a { color: var(--accent); text-decoration: none; }
.as-root a:hover { color: var(--accent-hover); }
.as-root *::selection { background: var(--accent-soft); color: var(--carbon-800); }

/* Focus — gold ring, never a default blue outline */
.as-root :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Utility: gold hairline divider */
.as-rule {
  height: 1px;
  border: 0;
  background: var(--hairline);
  margin: 0;
}