/* ===========================================================================
   Ashby Lumber — Base element styles & utility primitives
   Light, opt-in resets. Sets the reading surface for long-form manuals.
   =========================================================================== */

.ashby {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Headings --- */
.ashby h1, .ashby h2, .ashby h3, .ashby h4,
.ashby-display, .ashby-h1, .ashby-h2, .ashby-h3, .ashby-h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.ashby-display { font-size: var(--text-display); line-height: var(--leading-tight); }
.ashby-h1 { font-size: var(--text-h1); }
.ashby-h2 { font-size: var(--text-h2); }
.ashby-h3 { font-size: var(--text-h3); color: var(--text-subheading); }
.ashby-h4 { font-size: var(--text-h4); color: var(--text-subheading); }

/* --- Eyebrow / section label --- */
.ashby-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--sage);
}

/* --- Script accent (1–2 words ONLY) --- */
.ashby-script {
  font-family: var(--font-script);
  color: var(--gold);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
}

/* --- Body helpers --- */
.ashby-lead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}
.ashby-measure { max-width: var(--measure); }
.ashby-muted   { color: var(--text-muted); }

/* --- Links: gold, the one decorative-feeling exception, used for URLs --- */
.ashby a, a.ashby-link {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
}
.ashby a:hover, a.ashby-link:hover { color: var(--forest-mid); }

/* --- Section bar: the signature green left-rule --- */
.ashby-section-bar {
  border-left: var(--bar-width) solid var(--bar-section);
  padding-left: var(--space-4);
}