/* Mobile First Utilities */

.container {
  width: 100%;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-stretch { align-items: stretch; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }
.gap-6 { gap: 3rem; }

/* Grid */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 992px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Sections */
.section { padding: 5rem 0; }
.section-sm { padding: 3rem 0; }
.section-lg { padding: 8rem 0; }
.py-2 { padding-top: 1rem; padding-bottom: 1rem; }

/* Backgrounds */
.bg-cream { background-color: var(--color-cream); }
.bg-straw { background-color: var(--color-straw); color: var(--color-soil); }
.bg-soil { background-color: var(--color-soil); color: var(--color-cream); }
.bg-soil h1, .bg-soil h2, .bg-soil h3, .bg-soil h4, .bg-soil p { color: var(--color-cream); }
.bg-sage { background-color: var(--color-sage); color: var(--color-soil); }
.bg-sage h1, .bg-sage h2, .bg-sage h3, .bg-sage h4, .bg-sage p { color: var(--color-soil); }
.bg-sage .text-white, .bg-sage .text-cream { color: var(--color-soil); }
.bg-white { background-color: var(--color-white); }

/* Typography Helpers */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-terracotta { color: var(--color-terracotta); }
.text-straw { color: var(--color-straw); }
.text-cream { color: var(--color-cream); }
.text-soil { color: var(--color-soil); }
.text-white { color: var(--color-white); }
.text-sage { color: var(--color-sage); }
.font-serif { font-family: var(--font-display); }
.font-sans { font-family: var(--font-body); }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; letter-spacing: 0.05em; }

/* Spacing */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 3rem; }
.mt-2 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }
.w-full { width: 100%; }