/**
 * Shared Page Headers
 * Consistent header styling across all pages
 */

/* ============================================================
   PAGE HEADER
   ============================================================ */

.page-header {
  color: var(--color-primary-500);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-6);
  text-align: left;
}

/* ============================================================
   PAGE DESCRIPTION (optional subtitle)
   ============================================================ */

.page-description {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  margin-top: calc(-1 * var(--space-4));
  margin-bottom: var(--space-6);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .page-header {
    font-size: var(--text-xl);
  }
}