/* ============================================================
   Ward BOYL — Base Styles
   Modern reset (Josh Comeau) + brand-aware defaults.
   Load order: tokens.css → fonts.css → base.css.
   ============================================================ */

/* --- Reset --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html, body { height: 100%; }

body {
  -webkit-font-smoothing: antialiased;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--ward-text-body);
  background: var(--ward-cloud);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select { font: inherit; }

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

#root, #__next { isolation: isolate; }

/* --- Headings ------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', system-ui, sans-serif;
  color: var(--ward-text-primary);
  line-height: 1.15;
  letter-spacing: 0;
}

h1 { font-size: var(--fs-72); font-weight: 700; }
h2 { font-size: var(--fs-48); font-weight: 700; }
h3 { font-size: var(--fs-32); font-weight: 500; }
h4 { font-size: var(--fs-24); font-weight: 500; }
h5 { font-size: var(--fs-18); font-weight: 500; }
h6 { font-size: var(--fs-16); font-weight: 500; text-transform: none; }

/* --- Buttons ------------------------------------------------- */
button {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-weight: 700;          /* Bold per brand guide */
  letter-spacing: 0.025em;   /* +25 tracking */
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
}

/* --- Reduced motion ----------------------------------------- */
@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;
  }
}

/* --- Mobile globals (≤768px) -------------------------------- */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  body { font-size: 16px; line-height: 1.6; }
  img, video, iframe, svg { max-width: 100%; height: auto; }
  /* Lock body scroll while the fullscreen mobile nav is open */
  body:has(#nav-toggle:checked) { overflow: hidden; }
}