/* ============================================================
   base.css — reset, fonts, base typography, layout primitives
   ============================================================ */
@import url("/assets/fonts/inter.css");

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;            /* guard against horizontal bleed (e.g. hero image) */
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }

h1, h2, h3, h4 {
  color: var(--c-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 800;
}
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 700; }
strong, b { color: var(--c-text-strong); font-weight: 600; }

:focus-visible { outline: 3px solid rgba(80, 70, 229, .45); outline-offset: 2px; border-radius: 4px; }

/* ---- Layout primitives ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-pad); }
.section--band { background: var(--surface-band); }
.section--band-50 { background: var(--surface-band-50); }
.section--grad { background: var(--grad-section); }

/* utility */
.u-text-primary { color: var(--c-primary); }
.u-center { text-align: center; }