body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

main {
  min-height: calc(100vh - var(--nav-height) - 120px);
  padding-top: calc(var(--nav-height) + var(--spacing-xl));
  padding-bottom: var(--spacing-2xl);
}

/* Responsive */
@media (max-width: 768px) {
  :root {
    --font-size-3xl: 1.625rem;
    --font-size-2xl: 1.25rem;
  }

  .container {
    padding: 0 var(--spacing-md);
  }
}