/* ============================================================================
 * base.css — Global reset, element defaults, layout primitives
 * ----------------------------------------------------------------------------
 * Loaded AFTER tokens.css. Defines the page background gradient, default
 * styling for headings/paragraphs/lists/links/focus rings, and the two
 * container widths used across all pages (.container, .container-narrow).
 *
 * Component-scoped styles live in components.css.
 * ========================================================================== */

/* === Reset ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* === Element defaults ===================================================== */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--color-text);
  /* Layered radial gradients give the page its subtle depth without an image. */
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(22, 60, 106, 0.5), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(201, 168, 76, 0.08), transparent 60%),
    var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--color-accent-hover); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--color-white);
  margin: 0 0 var(--s-4);
}
h1 { font-size: clamp(2.25rem, 4.5vw, var(--fs-72)); }
h2 { font-size: clamp(1.75rem, 3.2vw, var(--fs-40)); }
/* H3 / H4 drop the display serif — they're closer to UI labels than headings. */
h3 {
  font-size: clamp(1.25rem, 1.9vw, var(--fs-24));
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
}
h4 {
  font-size: var(--fs-18);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
}

p { margin: 0 0 var(--s-4); color: var(--color-text); }
strong { color: var(--color-white); font-weight: 600; }

ul { margin: 0 0 var(--s-4); padding-left: var(--s-6); }
li { margin: var(--s-1) 0; }
li::marker { color: var(--color-accent); }

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border-strong), transparent);
  margin: var(--s-12) 0;
}

::selection { background: var(--color-accent); color: var(--brand-bg-primary); }

/* === Layout primitives ====================================================
 * .container         — page-width column (max 1200px).
 * .container-narrow  — reading-width column (max 880px) for body copy.
 * .section / .section-tight — vertical rhythm wrappers.
 * ------------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-6);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

.section { padding-block: clamp(60px, 7vw, 80px); }
.section-tight { padding-block: 30px; }

/* === Typographic utilities ================================================
 * .eyebrow   — small uppercase label that appears above section headings.
 * .lead-text — larger intro paragraph immediately under a heading.
 * .muted     — secondary copy color.
 * ------------------------------------------------------------------------ */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-20);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: var(--s-4);
}

.lead-text {
  font-size: clamp(var(--fs-18), 1.6vw, var(--fs-20));
  color: var(--color-text);
  max-width: 64ch;
}
.muted { color: var(--color-text-muted); }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}