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

/* Mobile First Approach */

/* Tablet (768px and up) */
@media (min-width: 768px) {
  :root {
    --font-size-h1: 3.5rem;   /* 56px */
    --font-size-h2: 2.75rem;  /* 44px */
  }
  
  .container {
    padding: 0 var(--spacing-lg);
  }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
  :root {
    --font-size-h1: 4rem;     /* 64px */
    --font-size-h2: 3rem;     /* 48px */
  }
}

/* Wide screens (1440px and up) */
@media (min-width: 1440px) {
  .container {
    padding: 0 var(--spacing-xl);
  }
}

/* Mobile specific adjustments */
@media (max-width: 767px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
}