/**
 * Global responsive breakpoints — loaded LAST in the CSS cascade
 * Breakpoints: sm 480px, md 768px, lg 1024px, xl 1280px
 */

@media (max-width: 1024px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
}

@media (max-width: 768px) {
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }

  .container { padding: 0 var(--space-sm); }
}

@media (max-width: 480px) {
  body { font-size: var(--text-sm); }
}