/* ============================================================
   Preppr — Base resets + a few brand utility classes
   Lightweight. Components style themselves via tokens.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--text-strong);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  margin: 0;
  font-weight: var(--fw-bold);
}

a { color: var(--text-accent); text-decoration: none; }

/* ---- Eyebrow / overline label with brand glyph ---- */
.preppr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}
.preppr-eyebrow::before { content: "✣"; font-size: 1em; line-height: 1; }
.preppr-eyebrow[data-glyph="✢"]::before { content: "✢"; }
.preppr-eyebrow[data-glyph="❖"]::before { content: "❖"; }

/* ---- Dot-grid texture (navy sections only) ---- */
.preppr-dotgrid {
  background-image: var(--dot-grid);
  background-size: var(--dot-grid-size);
}

/* ---- Duotone image treatment (navy → teal) ---- */
.preppr-duotone {
  filter: grayscale(1) contrast(1.05);
  background: var(--navy-900);
}
.preppr-duotone > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: 0.92;
  filter: sepia(1) hue-rotate(125deg) saturate(2.2) contrast(0.95);
}

/* ---- Centered container ---- */
.preppr-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}