/* frontend/css/layout.css */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
}

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-2);
}

.section {
  padding-block: var(--space-5);
}

.section--alt {
  background: var(--color-bg-alt);
}

h1 { font-size: var(--font-size-h1); font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: var(--font-size-h2); font-weight: 600; margin-bottom: var(--space-3); }
p { font-size: var(--font-size-body); }
small { font-size: var(--font-size-small); color: var(--color-text-muted); }

@media (max-width: 768px) {
  .section { padding-block: var(--space-4); }
}