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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-5xl); letter-spacing: -1.2px; line-height: 1.05; }
h2 { font-size: var(--text-2xl); letter-spacing: -.6px; line-height: 1.2; }
h3 { font-size: var(--text-lg); letter-spacing: -.36px; line-height: 1.3; }
p { margin: 0; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--positive); }
.neg { color: var(--destructive); }
.muted { color: var(--muted-foreground); }

.container { max-width: var(--container); margin: 0 auto; padding-inline: 24px; }
@media (max-width: 640px) {
  .container { padding-inline: 16px; }
  h1 { font-size: 2.1rem; letter-spacing: -.8px; }
  h2 { font-size: var(--text-xl); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}