/* =========================================================================
   BASE
   Typographic defaults, body background, selection styling.
   Consumes tier 2 theme tokens only.
   ========================================================================= */

/* Body styles */
body {
  font-family: var(--theme-font-family-body);
  font-size: var(--theme-font-size-body);
  font-weight: var(--theme-font-weight-body);
  line-height: var(--theme-line-height-body);
  color: var(--theme-color-text-default);
  background-color: var(--theme-color-background-default);
  background-image:
    radial-gradient(
      ellipse at top,
      var(--theme-color-background-subtle),
      var(--theme-color-background-default) 60%
    );
  background-attachment: fixed;
}

/* -------------------------------------------------------------------------
   Headings
   ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  line-height: var(--theme-line-height-heading);
  letter-spacing: var(--theme-letter-spacing-heading);
  color: var(--theme-color-text-heading);
  text-wrap: balance;
}

/* Aboreto is a display-only face; it reads as too thin at small sizes.
   Scope it to large display copy (h1/h2) and opt-in .display utility. */
h1,
h2,
.display {
  font-family: var(--theme-font-family-display);
  font-weight: var(--theme-font-weight-heading);
}

h1 {
  font-size: var(--theme-font-size-heading-xl);
}

h2 {
  font-size: var(--theme-font-size-heading-lg);
}

/* h3+ use body face with heavier weight so smaller headings stay legible. */
h3, h4, h5, h6 {
  font-family: var(--theme-font-family-body);
  font-weight: var(--theme-font-weight-emphasis);
  letter-spacing: 0;
}

h3 {
  font-size: var(--theme-font-size-heading-sm);
}

h4 {
  font-size: var(--theme-font-size-heading-xs);
}

h5 {
  font-size: var(--theme-font-size-lead);
}

h6 {
  font-size: var(--theme-font-size-body);
  text-transform: uppercase;
  letter-spacing: var(--theme-letter-spacing-eyebrow);
}

/* -------------------------------------------------------------------------
   Body copy
   ------------------------------------------------------------------------- */

p {
  max-width: var(--theme-measure-prose);
  text-wrap: pretty;
}

p + p {
  margin-top: var(--theme-space-stack-sm);
}

.lead {
  font-size: var(--theme-font-size-lead);
  line-height: var(--theme-line-height-loose);
  color: var(--theme-color-text-default);
  max-width: var(--theme-measure-prose);
}

small {
  font-size: var(--theme-font-size-small);
  color: var(--theme-color-text-muted);
}

strong {
  font-weight: var(--theme-font-weight-emphasis);
  color: var(--theme-color-text-heading);
}

em {
  font-style: italic;
}

/* -------------------------------------------------------------------------
   Lists that carry back the default rendering (opt in via .prose list)
   ------------------------------------------------------------------------- */

.prose ul,
.prose ol {
  padding-left: var(--theme-space-inline-lg);
  max-width: var(--theme-measure-prose);
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: var(--theme-space-stack-xs);
}

/* -------------------------------------------------------------------------
   Selection, horizontal rules, blockquotes
   ------------------------------------------------------------------------- */

::selection {
  background-color: var(--theme-color-brand-primary);
  color: var(--theme-color-text-heading);
}

hr {
  border: 0;
  height: 1px;
  background: var(--theme-color-border-subtle);
  margin-block: var(--theme-space-section);
}

blockquote {
  font-family: var(--theme-font-family-body);
  font-size: var(--theme-font-size-lead);
  line-height: var(--theme-line-height-loose);
  color: var(--theme-color-text-heading);
  padding-inline-start: var(--theme-space-inline-lg);
  border-inline-start: 3px solid var(--theme-color-brand-secondary);
  max-width: var(--theme-measure-prose);
  font-style: italic;
}

blockquote cite {
  display: block;
  margin-top: var(--theme-space-stack-sm);
  font-family: var(--theme-font-family-body);
  font-size: var(--theme-font-size-small);
  font-style: normal;
  color: var(--theme-color-text-muted);
}

blockquote cite::before {
  content: "— ";
}

/* -------------------------------------------------------------------------
   Utility: eyebrow label
   ------------------------------------------------------------------------- */

.eyebrow {
  display: inline-block;
  font-family: var(--theme-font-family-body);
  font-size: var(--theme-font-size-body);
  font-weight: var(--theme-font-weight-emphasis);
  text-transform: uppercase;
  letter-spacing: var(--theme-letter-spacing-eyebrow);
  color: var(--theme-color-brand-emphasis);
}

/* -------------------------------------------------------------------------
   Visually hidden (for screen-reader-only content)
   ------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}