/* ============================================================
   WellServe — typography.css
   Base element type styles + reusable type-scale utility classes.
   Everything reads from the --fs-* variables in variables.css,
   so the whole scale can be tuned in one place.
   ============================================================ */

body{
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-background);
  line-height: 1.65;
  font-size: 17px;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--color-text);
  line-height: 1.15;
  margin-bottom: .5em;
  font-weight: 600;
}
h1{ font-size: var(--fs-heading-xl); letter-spacing: -0.01em; }
h2{ font-size: var(--fs-heading-m); }
h3{ font-size: var(--fs-heading-s); }

p{ margin-bottom: 1em; color: var(--color-text-muted); }

/* Base link styling. Reset.css strips defaults, so this is the
   real baseline: teal, underlined only where it's inline prose
   (a link that relies on colour alone is an accessibility gap). */
a{ color: var(--color-primary-dark); }
p a, li a, .article-body a{
  text-decoration: underline;
  text-decoration-color: rgba(33,128,117,0.35);
  text-underline-offset: 2px;
}
p a:hover, li a:hover, .article-body a:hover{ text-decoration-color: currentColor; }

/* ---------- Type-scale utility classes ----------
   For markup that wants an explicit scale step regardless of
   the semantic heading level (e.g. a <div> styled as a display line). */
.text-display{ font-family: var(--font-display); font-size: var(--fs-display); font-weight: 600; line-height: 1.1; color: var(--color-text); }
.text-heading-xl{ font-family: var(--font-display); font-size: var(--fs-heading-xl); font-weight: 600; line-height: 1.15; color: var(--color-text); }
.text-heading-l{ font-family: var(--font-display); font-size: var(--fs-heading-l); font-weight: 600; line-height: 1.2; color: var(--color-text); }
.text-heading-m{ font-family: var(--font-display); font-size: var(--fs-heading-m); font-weight: 600; line-height: 1.2; color: var(--color-text); }
.text-heading-s{ font-family: var(--font-display); font-size: var(--fs-heading-s); font-weight: 600; color: var(--color-text); }
.text-body-lg{ font-size: var(--fs-body-lg); color: var(--color-text-muted); }
.text-body{ font-size: var(--fs-body); color: var(--color-text-muted); }
.text-small{ font-size: var(--fs-small); color: var(--color-text-muted); }
.text-caption{ font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); }

/* Existing alias used throughout current content */
.lede{ font-size: var(--fs-body-lg); color: var(--color-text-muted); }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin-bottom: .6rem;
  display: block;
}

/* Editorial drop cap — used on manifesto / long-form openers */
.drop-cap::first-letter{
  font-family: var(--font-display);
  font-size: 3.7em;
  float: left;
  line-height: .82;
  padding: .06em .1em 0 0;
  color: var(--color-text);
  font-weight: 600;
}

/* Pull-quote / manifesto line component */
.quote, .pull-line{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.3;
  margin: 2em 0;
  max-width: 680px;
}