/*
 * Harmon Lively base: fluid type, focus ring, reduced motion.
 * Sizes scale from the phone value at 390px to the desktop value at 1440px
 * (HARMON_TOKENS.json usage notes). Element selectors sit inside :where() so
 * Elementor Kit and widget settings always win without extra specificity.
 */
:root {
  --hl-fs-display: clamp(2.75rem, 2.0071rem + 3.0476vw, 4.75rem);   /* 44 to 76px */
  --hl-fs-h1: clamp(2.5rem, 2.0357rem + 1.9048vw, 3.75rem);          /* 40 to 60px */
  --hl-fs-h2: clamp(2.125rem, 1.8464rem + 1.1429vw, 2.875rem);       /* 34 to 46px */
  --hl-fs-h3: clamp(1.625rem, 1.4857rem + 0.5714vw, 2rem);           /* 26 to 32px */
  --hl-fs-h4: 1.5rem;                                                /* 24px */
  --hl-fs-quote: clamp(1.5rem, 1.3607rem + 0.5714vw, 1.875rem);      /* 24 to 30px */
  --hl-fs-lead: clamp(1.1875rem, 1.1411rem + 0.1905vw, 1.3125rem);   /* 19 to 21px */
  --hl-fs-body: 1.0625rem;                                           /* 17px */
  --hl-fs-small: 0.875rem;                                           /* 14px */
}

:where(body) {
  font-family: var(--hl-font-sans);
  font-size: var(--hl-fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--hl-charcoal);
  background: var(--hl-white);
  -webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--hl-font-serif);
  font-weight: 400;
  color: var(--hl-navy);
}
:where(h1) { font-size: var(--hl-fs-h1); line-height: 1.1; }
:where(h2) { font-size: var(--hl-fs-h2); line-height: 1.15; }
:where(h3) { font-size: var(--hl-fs-h3); line-height: 1.25; }
:where(h4) { font-size: var(--hl-fs-h4); line-height: 1.35; font-weight: 500; }

:where(a) { color: var(--hl-mauve); }
:where(a:hover) { color: var(--hl-navy); }

/* Utility classes the Kit and widgets can reference */
.hl-display { font-family: var(--hl-font-serif); font-size: var(--hl-fs-display); font-weight: 400; line-height: 1.05; }
.hl-lead { font-family: var(--hl-font-sans); font-size: var(--hl-fs-lead); font-weight: 300; line-height: 1.6; }
.hl-quote { font-family: var(--hl-font-serif); font-size: var(--hl-fs-quote); font-style: italic; font-weight: 400; line-height: 1.4; }
.hl-small { font-size: var(--hl-fs-small); line-height: 1.6; color: var(--hl-slate); }
.hl-eyebrow-text { font-family: var(--hl-font-sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; line-height: 1.4; color: var(--hl-mauve); }

/* Focus: 2px navy ring, 2px offset; rose-light on navy grounds. Never removed. */
:focus-visible {
  outline: 2px solid var(--hl-focus);
  outline-offset: 2px;
}
.on-navy :focus-visible,
.hl-on-navy :focus-visible {
  outline-color: var(--hl-rose-light);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}