/* ============================================================
   RESMA — Base styles (resets, typography defaults, layout)
   Loaded after tokens.css. Pure foundations only — no components.
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-ink);
  color: var(--c-paper-2);
  padding: var(--sp-3) var(--sp-4);
  z-index: var(--z-toast);
  border-radius: 0 0 var(--r-2) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-serif);
  font-weight: var(--fw-semi);
  color: var(--c-ink);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: clamp(var(--fs-39), 5vw, var(--fs-61)); }
h2 { font-size: clamp(var(--fs-31), 4vw, var(--fs-49)); }
h3 { font-size: clamp(var(--fs-25), 3vw, var(--fs-31)); }
h4 { font-size: var(--fs-25); }
h5 { font-size: var(--fs-20); font-weight: var(--fw-medium); }
h6 { font-size: var(--fs-16); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--c-ink-3); }

/* ---------- Paragraphs / text ---------- */
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }
.lede { font-size: var(--fs-20); color: var(--c-ink-2); line-height: var(--lh-relaxed); max-width: 60ch; }
.kicker {
  display: inline-block;
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-primary-700);
  margin-bottom: var(--sp-3);
}
small, .small { font-size: var(--fs-14); color: var(--c-ink-3); }

/* ---------- Links ---------- */
a {
  color: var(--c-accent);
  text-decoration-color: var(--c-accent-100);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--c-primary-700); text-decoration-color: currentColor; }
a:focus-visible { outline: 3px solid var(--c-focus-ring); outline-offset: 2px; border-radius: var(--r-1); }

/* ---------- Lists ---------- */
ul, ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
ul ul, ol ol { margin-bottom: 0; }
li { margin-bottom: var(--sp-2); }
.list-clean { list-style: none; padding-left: 0; }

/* ---------- Media ---------- */
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
img { font-style: italic; }   /* shows broken-image alt text in italic */

/* ---------- Tables ---------- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-14);
}
th, td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: top; }
th { font-weight: var(--fw-semi); color: var(--c-ink-2); background: var(--c-sand); }

/* ---------- Forms (low-level — full styling in components.css) ---------- */
input, textarea, select, button { font: inherit; color: inherit; }

/* ---------- Layout: container + section ---------- */
.container { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding-inline: var(--sp-5); }
.container--lg { max-width: var(--container-lg); }
.container--md { max-width: var(--container-md); }
.container--sm { max-width: var(--container-sm); }

.section { padding-block: clamp(var(--sp-7), 8vw, var(--sp-9)); }
.section--tight { padding-block: var(--sp-7); }
.section--sand  { background: var(--c-sand); }
.section--white { background: var(--c-paper-2); }
.section--navy  { background: var(--c-accent); color: var(--c-paper-2); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--c-paper-2); }

.section__head { max-width: 60ch; margin-bottom: var(--sp-7); }
.section__head--center { margin-inline: auto; text-align: center; }

/* ---------- Grid utilities ---------- */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid--feature { grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1024px) {
  .grid--feature { grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); }
  .grid--feature--reverse > *:first-child { order: 2; }
}

/* ---------- Spacing utilities (sparing — prefer components) ---------- */
.stack > * + * { margin-top: var(--sp-4); }
.stack--lg > * + * { margin-top: var(--sp-5); }
.stack--xl > * + * { margin-top: var(--sp-7); }

/* ---------- Hidden / a11y utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Misc ---------- */
hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-7) 0; }
blockquote {
  border-left: 4px solid var(--c-primary);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  margin: 0 0 var(--sp-5);
  font-family: var(--ff-serif);
  font-size: var(--fs-25);
  color: var(--c-ink-2);
  line-height: var(--lh-snug);
}
::selection { background: var(--c-primary); color: var(--c-paper-2); }

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