/* Utility Classes - Remplacement de Tailwind CDN */

/* === GRID SYSTEM === */
.grid {
  display: grid;
}

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

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

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

.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

/* === FLEXBOX === */
.flex {
  display: flex;
}

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

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

/* === TEXT === */
.text-center {
  text-align: center;
}

.text-4xl {
  font-size: var(--text-4xl);
}

.text-2xl {
  font-size: var(--text-2xl);
}

.text-xl {
  font-size: var(--text-xl);
}

.text-lg {
  font-size: var(--text-lg);
}

.text-3xl {
  font-size: var(--text-3xl);
}

.font-bold {
  font-weight: 600;
}

.font-semibold {
  font-weight: 500;
}

.leading-relaxed {
  line-height: 1.625;
}

/* === SPACING === */
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-16 { margin-bottom: var(--space-16); }

.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }

.p-4 { padding: var(--space-4); }
.p-8 { padding: var(--space-8); }

/* === SIZING === */
.w-full { width: 100%; }
.max-w-md { max-width: 28rem; }
.max-w-2xl { max-width: 42rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* === COLORS === */
.text-neutral-900 { color: var(--neutral-900); }
.text-neutral-700 { color: var(--neutral-700); }
.text-neutral-600 { color: var(--neutral-600); }
.text-white { color: white; }

/* === BORDERS === */
.rounded-2xl { border-radius: var(--border-radius-2xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .text-4xl {
    font-size: var(--text-3xl);
  }

  .text-2xl {
    font-size: var(--text-xl);
  }
}