/* Luwte — base element styling & a few utility helpers.
 * Lightweight: sets sensible brand defaults for raw HTML in cards & kits. */

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

/* Headings default to the display face, ink colour, tight leading */
.luwte-root h1, .luwte-root h2, .luwte-root h3,
.luwte-root h4, .luwte-root h5, .luwte-root h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}

.luwte-root p { margin: 0; text-wrap: pretty; }
.luwte-root a { color: var(--link); text-decoration: none; }
.luwte-root a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Eyebrow / tagline in caps ---- */
.luwte-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* ---- Wave divider helper: three short gold arcs motif ---- */
.luwte-waves {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.luwte-waves > span {
  display: block;
  width: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.luwte-waves > span:nth-child(1) { height: 10px; opacity: 0.55; }
.luwte-waves > span:nth-child(2) { height: 18px; opacity: 0.8; }
.luwte-waves > span:nth-child(3) { height: 26px; }