/* ============================================================
   BASE — reset, fonts, typography utilities
   ============================================================ */

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

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }

body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
}

a { color: inherit; }

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

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

/* ---- Typography utility classes ---- */

.h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: 1;
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-tight);
  color: var(--color-display);
  margin: 0;
}

.h2 {
  font-family: var(--font-sans);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  color: var(--color-mint);
  margin: 0;
}

.h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
  color: var(--color-display);
  margin: 0;
}

.body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-secondary);
  font-weight: var(--fw-regular);
}

.small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--color-secondary);
}

/* Display number — for hero stats, counts */
.display-num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-light);
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Mono utility */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Color utilities */
.c-mint       { color: var(--color-mint); }
.c-mint-deep  { color: var(--color-mint-deep); }
.c-mint-mid   { color: var(--color-mint-mid); }
.c-display    { color: var(--color-display); }
.c-primary    { color: var(--color-primary); }
.c-secondary  { color: var(--color-secondary); }
.c-disabled   { color: var(--color-disabled); }

/* Italic emphasis (used for closing lines) */
.italic-quote {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--color-mint);
  line-height: 1.4;
  margin: 0;
}