/*!
 * css/_base.css · v2
 * Base typography defaults · Phase 1 unification
 *
 * Heading sizes match the dominant pattern already used in your CSS:
 *   H1 = clamp(30px,5vw,60px) · matches 11 files
 *   H2 = clamp(24px,3.8vw,46px) · matches 11 files
 *   H3 = clamp(22px,3vw,36px) · matches 7 files
 *
 * Visual output unchanged on pages that use these sizes.
 * Pages with custom heading sizes still win (higher CSS specificity).
 */

body {
  font-family: var(--ff-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--c-ink);
  background: var(--c-white);
}

/* ─── HEADING DEFAULTS · font family + rhythm ONLY ─── */
/*
   NOTE: We deliberately do NOT set font-size here.
   Your existing per-page CSS owns heading sizes.
   Foundation only unifies what's broken — font family + line-height + color.

   To override a heading size in NEW pages, use the .fs-h1 .. .fs-h6
   utility classes below, or the col-context helpers (.h-col-4 etc.).
*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--c-ink);
  /* font-size deliberately NOT set · page CSS handles it */
}

h1 { font-weight: 800; letter-spacing: var(--ls-tight); }
h2 { font-weight: 800; letter-spacing: var(--ls-tight); }
h3 { font-weight: 700; }
h4 { font-weight: 700; }
h5 { font-weight: 700; }
h6 { font-weight: 600; line-height: 1.4; letter-spacing: var(--ls-base); }

/* Heading rhythm */
h1 + p, h2 + p, h3 + p, h4 + p { margin-top: var(--sp-12); }
h1, h2 { margin-bottom: var(--sp-16); }
h3, h4 { margin-bottom: var(--sp-12); }
h5, h6 { margin-bottom: var(--sp-8); }

/* ─── OPT-IN HEADING SIZES · use these on new pages or to fix specific spots ─── */
/* Apply only when you explicitly want the foundation scale */
.fs-h1 { font-size: var(--h1) !important; }
.fs-h2 { font-size: var(--h2) !important; }
.fs-h3 { font-size: var(--h3) !important; }
.fs-h4 { font-size: var(--h4) !important; }
.fs-h5 { font-size: var(--h5) !important; }
.fs-h6 { font-size: var(--h6) !important; }

/* ─── COL-CONTEXT HEADING UTILITIES ─── */
/* Use only when you need to FORCE a heading into a tight column.
   No effect unless explicitly applied to the element. */
.h-col-12 { font-size: var(--h-col-12) !important; }
.h-col-8  { font-size: var(--h-col-8)  !important; }
.h-col-6  { font-size: var(--h-col-6)  !important; }
.h-col-4  { font-size: var(--h-col-4)  !important; }
.h-col-3  { font-size: var(--h-col-3)  !important; }
.h-col-2  { font-size: var(--h-col-2)  !important; }

/* ─── PARAGRAPHS ─── */
p {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}

p + p { margin-top: var(--sp-12); }

/* Lead paragraph (intro text under hero/section heading) */
.lead, p.lead {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}

/* Small note text */
.note, p.note, small {
  font-size: var(--fs-13);
  color: var(--c-ink-3);
}

/* ─── LINKS ─── */
a {
  color: var(--c-signal-d);
  transition: color var(--t-fast);
}

a:hover, a:focus { color: var(--c-ink); }

/* ─── STRONG / EM ─── */
strong, b { font-weight: 700; color: var(--c-ink); }
em, i { font-style: italic; }

/* ─── LISTS ─── */
ul, ol { padding-left: var(--sp-24); }
li { margin-bottom: var(--sp-4); }

/* ─── BLOCKQUOTE ─── */
blockquote {
  border-left: 3px solid var(--c-signal);
  padding-left: var(--sp-16);
  margin: var(--sp-24) 0;
  font-style: italic;
  color: var(--c-ink-2);
}

/* ─── CODE ─── */
code, kbd, samp {
  font-family: var(--ff-mono);
  font-size: 0.875em;
  background: var(--c-surface);
  padding: 0.125em 0.375em;
  border-radius: var(--r-sm);
}

/* ─── OVERLINE / EYEBROW ─── */
.overline, .eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-11);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-x-wide);
  color: var(--c-signal-d);
  margin-bottom: var(--sp-8);
}