/* ============================================================================
   Escape Velocity — base layer
   ----------------------------------------------------------------------------
   Foundations for any on-brand web page: a gentle reset, tokenized body, a
   responsive `.container`, and a fluid type scale. Opt-in.

   LOAD ORDER (contract): tokens.css → base.css → components.css → utilities.css
   base.css consumes `var(--…)` from tokens.css and MUST load after it.

   Breakpoints are 640 / 768 / 1024 / 1280 (sm/md/lg/xl), mobile-first.
   NOTE: CSS custom properties can't be used in @media conditions, so the px
   literals below are hardcoded; tokens.ts is the authority and build-tokens.ts
   drift-checks them. See tokens.ts § breakpoints.
   ========================================================================== */

/* ── Reset (gentle: safe for consumers that import only this layer) ───────── */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { max-width: 100%; display: block; }
input, button, textarea, select { font: inherit; color: inherit; }

/* ── Fluid type scale — responsive without media queries ──────────────────── */
:root {
  --fs-display: clamp(2rem, 1.3rem + 3.4vw, 3.5rem);   /* hero / page titles */
  --fs-h1:      clamp(1.7rem, 1.25rem + 2.1vw, 2.5rem);
  --fs-h2:      clamp(1.35rem, 1.1rem + 1.2vw, 1.875rem);
  --fs-h3:      clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  --fs-body:    clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
  --fs-small:   0.8125rem;
  --lh-tight:   1.2;
  --lh-body:    1.6;
}

/* ── Body & base elements ─────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--color-cream);
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-terracotta); }

/* Heading defaults — headline font + fluid sizes. Class equivalents (.h1 …)
   let consumers opt in without restyling bare elements. */
h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--font-headline);
  line-height: var(--lh-tight);
  color: var(--color-text);
}
h1, .h1 { font-size: var(--fs-h1);   font-weight: 700; }
h2, .h2 { font-size: var(--fs-h2);   font-weight: 700; }
h3, .h3 { font-size: var(--fs-h3);   font-weight: 600; }
.display { font-family: var(--font-headline); font-weight: 700; font-size: var(--fs-display); line-height: var(--lh-tight); }

/* ── Responsive container ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--padding-mobile);
}
.container--narrow { max-width: var(--container-narrow); }

/* mobile-first: mobile padding is the base; widen at the tablet/desktop breakpoints */
@media (min-width: 640px) {
  .container { padding-inline: var(--padding-tablet); }
}
@media (min-width: 768px) {
  .container { padding-inline: var(--padding-desktop); }
}