/* Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-background);
  font-family: var(--font-family-primary);
  font-optical-sizing: auto;
  font-style: normal;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
}

a {
  position: relative;
  text-decoration: none;
  color: var(--color-text-primary);
}

h1, h2, h3, h4, h5, p {
  color: var(--color-text-primary);
}

h1 {
  font-size: var(--font-size-h1);
  color: var(--color-accent);
}

h1 small {
  color: var(--color-text-primary);
  font-weight: 300;
  font-size: var(--font-size-h1-small);
}

h2 {
  font-size: var(--font-size-h2);
  text-align: center;
  display: table;
  margin: 0 auto var(--spacing-md);
  line-height: var(--line-height-tight);
}

h3 { font-size: var(--font-size-h3); font-weight: 700; color: var(--color-accent); }
h4 { font-size: var(--font-size-h4); font-weight: 550; }
h5 { font-size: var(--font-size-h5); }
p  { font-size: var(--font-size-body); }

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  h2 {
    margin-bottom: var(--spacing-sm);
  }
}