/* ============================================================
   VIAJAR — Base: Typography, Body, Utilities
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--black);
  background: var(--white);
  padding-top: var(--navbar-height);
}

/* ── Display headings ── */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
}

h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.3;
}

.display-xl  { font-size: var(--fs-hero); }
.display-lg  { font-size: var(--fs-5xl); }
.display-md  { font-size: var(--fs-4xl); }
.display-sm  { font-size: var(--fs-3xl); }

/* ── Body text ── */
p { line-height: 1.7; }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-muted { color: var(--text-muted); }
.text-gold  { color: var(--gold); }
.text-teal  { color: var(--teal); }
.text-white { color: var(--white); }

/* ── Font weights ── */
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* ── Text styles ── */
.italic { font-style: italic; }

/* ── Eyebrow label ── */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── Stars ── */
.stars {
  color: var(--gold);
  letter-spacing: 0.05em;
}

/* ── Visibility utilities ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Flex utilities ── */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-2  { gap: var(--sp-2); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }

/* ── Spacing utilities ── */
.mt-4  { margin-top: var(--sp-4); }
.mt-8  { margin-top: var(--sp-8); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-8  { margin-bottom: var(--sp-8); }

/* ── Lazy image fade-in ── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}
img[loading="lazy"].loaded {
  opacity: 1;
}
img:not([loading="lazy"]) {
  opacity: 1;
}

/* ── Scrollbar thin ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--teal-muted) transparent;
}