header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  color: var(--text-primary);
}

header h1 {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-sm);
  text-shadow: 2px 2px 4px var(--shadow);
  font-weight: 700;
}

header p {
  font-size: 1.2rem;
  opacity: 0.9;
  color: var(--text-secondary);
}

.form-section h2 {
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
  font-size: 1.4rem;
  font-weight: 600;
}

.output-header h3 {
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  header h1 {
    font-size: 2rem;
  }
}