/* ============================================================
   Jackim Woods & Co. — Base element defaults & primitives
   Minimal, unobtrusive. Sets the two-typeface system and the
   signature element patterns (eyebrow, lead, stat, section bands).
   ============================================================ */

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

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

/* -- Headings: display serif only -- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--lh-heading);
  margin: 0;
  text-wrap: balance;
}
h1 { font-weight: var(--fw-black); font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-weight: var(--fw-bold);  font-size: var(--fs-h2); }
h3 { font-weight: var(--fw-bold);  font-size: var(--fs-h3); }

p { margin: 0; text-wrap: pretty; }

/* -- Links: teal wayfinding -- */
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }
a.jw-inline-link {
  color: var(--text-link);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a.jw-inline-link:hover { color: var(--text-link-hover); }

/* -- Focus -- */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Signature primitives (utility classes) ---------- */

/* Eyebrow — the single most recognizable pattern */
.jw-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.jw-on-dark .jw-eyebrow { color: var(--stat-on-dark); }

/* Lead paragraph */
.jw-lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  color: var(--text-muted);
  line-height: var(--lh-snug);
  max-width: 44rem;
}
.jw-on-dark .jw-lead { color: var(--text-on-dark-soft); }

/* Stat number */
.jw-stat {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--stat);
}
.jw-on-dark .jw-stat { color: var(--stat-on-dark); }
.jw-stat-label {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: var(--sp-2);
}
.jw-on-dark .jw-stat-label { color: var(--text-on-dark-soft); }

/* Layout helpers */
.jw-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.jw-section { padding: var(--section-pad-y) 0; }
@media (min-width: 768px) { .jw-section { padding: var(--section-pad-y-lg) 0; } }

/* Section bands (rhythm: white -> off-white -> navy) */
.jw-band-white   { background: var(--surface-page); }
.jw-band-alt     { background: var(--surface-alt); }
.jw-band-navy    { background: var(--surface-dark); color: var(--text-on-dark); }
.jw-band-navy h1, .jw-band-navy h2, .jw-band-navy h3 { color: var(--text-on-dark); }
.jw-band-navy .jw-lead { color: var(--text-on-dark-soft); }

/* On-dark helper for any container */
.jw-on-dark, .jw-on-dark h1, .jw-on-dark h2, .jw-on-dark h3 { color: var(--text-on-dark); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}