/* ==========================================================================
   Design Tokens — La Habra Historical Museum
   Source of truth: the approved interior-page comps — the mosaic homepage
   (Design/home-option-b-media-mosaic.html), about-us.html, contact.html,
   privacy-policy.html, terms.html — which all agree on both the color/font
   vars and the h1/h2/.eyebrow type scale below.
   Design/coming-soon-organic-fluid.html was an earlier, separately-shipped
   splash page with a bigger one-off hero scale; it is not rendered through
   this theme and is not the design source for this site.
   ========================================================================== */

:root {
  --cream: #F1ECDD;
  --sage: #6B8C53;
  --deep-sage: #4F6B3D;
  --harbor: #4C6B8A;
  --ink: #1E2420;
  --sage-tint: #E4EBDD;
  --harbor-tint: #DCE4EA;
  --stone: #948D7A;
  --meadow: #8FB56B;

  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-heritage: 'Libre Caslon Text', serif;
  --font-text: 'Hanken Grotesk', sans-serif;
}

::selection {
  background: var(--sage);
  color: var(--cream);
}

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

@media (max-width: 560px) {
  body {
    font-size: 18.5px;
  }
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 5.4vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

h1 em, .h1 em {
  font-family: var(--font-heritage);
  font-style: italic;
  font-weight: 400;
  color: var(--sage);
  letter-spacing: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

h2 em, .h2 em {
  font-family: var(--font-heritage);
  font-style: italic;
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-heritage);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--harbor);
  margin-bottom: 12px;
}

.label {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}