/* ============================================
   base.css — Resets, base typography, layout primitives
   Depends on tokens.css being loaded first.
   ============================================ */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Anchor-jump clearance. The site-header is position:fixed and
     ~84-90px tall, sliding in when the page scrolls. Native anchor
     jumps and scrollIntoView calls land their target at this offset
     from the top so the header has room to slide in without covering
     the heading. Per-target overrides via scroll-margin-top live in
     pages.css (e.g., .aff-state for affiliate state sections). */
  scroll-padding-top: 120px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-page);
  min-height: 100vh;
  /* tnum globally taxes font rendering on every element — omit; apply per stat/number as needed */
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

h1 {
  font-size: var(--type-h1);
  line-height: var(--lh-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--type-h2);
  line-height: var(--lh-h2);
}

h3 {
  font-size: var(--type-h3);
  line-height: var(--lh-h3);
}

h4 {
  font-size: var(--type-h4);
  line-height: var(--lh-h4);
}

.display {
  font-family: var(--font-serif);
  font-size: var(--type-display);
  line-height: var(--lh-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

p {
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.body-lg {
  font-size: var(--type-body-lg);
  line-height: var(--lh-body-lg);
}

.body-sm {
  font-size: var(--type-body-sm);
  line-height: var(--lh-body-sm);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cta-secondary-text);
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--link-hover);
}

ul, ol {
  list-style: none;
  padding: 0;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* ============================================
   Layout Primitives
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-8); }
}

.container--narrow {
  max-width: var(--container-narrow);
}

.stack > * + * {
  margin-top: var(--stack-gap, var(--space-4));
}

.stack--lg > * + * { --stack-gap: var(--space-8); }
.stack--xl > * + * { --stack-gap: var(--space-12); }

.grid {
  display: grid;
  gap: var(--space-5);
}

.section {
  padding-block: var(--space-16);
}

@media (min-width: 1024px) {
  .section { padding-block: var(--space-20); }
}

/* ============================================
   Accessibility
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--cta-primary-bg);
  outline-offset: 2px;
}