/* Typography, body, layout primitives. */

html { font-size: var(--font-size-md); }

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: var(--line-normal);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1 { font-size: var(--font-size-2xl); line-height: var(--line-tight); margin-bottom: var(--space-4); }
h2 { font-size: var(--font-size-xl);  line-height: var(--line-tight); margin-bottom: var(--space-3); }
h3 { font-size: var(--font-size-lg);  line-height: var(--line-tight); margin-bottom: var(--space-2); }

p { margin-bottom: var(--space-3); }

a { color: var(--color-accent); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

.container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
}

.container-narrow { max-width: 420px; }

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