/* ===========================================
    RESPONSIVE BREAKPOINTS
   =========================================== */
/* xs - Default (mobile first) */
/* @media (min-width: 475px) {
} */

/* sm */
/* @media (min-width: 640px) {
} */

/* md */
/* @media (min-width: 768px) {
} */

/* lg */
/* @media (min-width: 1024px) {
} */

/* xl */
/* @media (min-width: 1280px) {
} */

/* 2xl */
/* @media (min-width: 1536px) {
} */
/* ===========================================
   UTILITY CLASSES
=========================================== */

/* Flexbox utilities */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-grow {
  flex-grow: 1;
}

/* Text utilities */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-white {
  color: white;
}

.text-muted {
  color: var(--text-muted);
}

/* Grid utilities */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Spacing utilities */
.m-0 {
  margin: 0;
}
.m-1 {
  margin: var(--spacing-xs);
}
.m-2 {
  margin: var(--spacing-sm);
}
.m-3 {
  margin: var(--spacing-md);
}
.m-4 {
  margin: var(--spacing-lg);
}
.m-5 {
  margin: var(--spacing-xl);
}

.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: var(--spacing-xs);
}
.mt-2 {
  margin-top: var(--spacing-sm);
}
.mt-3 {
  margin-top: var(--spacing-md);
}
.mt-4 {
  margin-top: var(--spacing-lg);
}
.mt-5 {
  margin-top: var(--spacing-xl);
}

.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: var(--spacing-xs);
}
.mb-2 {
  margin-bottom: var(--spacing-sm);
}
.mb-3 {
  margin-bottom: var(--spacing-md);
}
.mb-4 {
  margin-bottom: var(--spacing-lg);
}
.mb-5 {
  margin-bottom: var(--spacing-xl);
}

.p-0 {
  padding: 0;
}
.p-1 {
  padding: var(--spacing-xs);
}
.p-2 {
  padding: var(--spacing-sm);
}
.p-3 {
  padding: var(--spacing-md);
}
.p-4 {
  padding: var(--spacing-lg);
}
.p-5 {
  padding: var(--spacing-xl);
}

/* Shadow utilities */
.shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.shadow-md {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Display utilities */
.hidden {
  display: none;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

/* Position utilities */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

/* Border radius utilities */
.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded-md {
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-full {
  border-radius: 50%;
}

/* ===========================================
   RESPONSIVE HEADING & SUBTITLE UTILITIES
=========================================== */

/* xs - Default (mobile first) */
.heading-xs {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

.heading-sm {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

.heading-md {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.heading-lg {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
}

.heading-xl {
  font-size: clamp(2rem, 2.5vw, 2.5rem);
}

.subtitle-xs {
  font-size: 0.8rem;
}

.subtitle-sm {
  font-size: 0.9rem;
}

.subtitle-md {
  font-size: clamp(1rem, 2.5vw, 1.1rem);
}

.subtitle-lg {
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
}

.subtitle-xl {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

/* ===========================================
   CONTAINER MAX-WIDTHS
=========================================== */

/* xs - Default (mobile first) */
.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

/* sm - 475px */
@media (min-width: 475px) {
  .container {
    max-width: 475px;
  }
}

/* md - 640px */
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

/* lg - 768px */
@media (min-width: 768px) {
  .container {
    max-width: 768px;
    padding: 0 20px;
  }
}

/* xl - 1024px */
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

/* 2xl - 1280px */
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

/* 3xl - 1536px */
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}