/**
 * Bridge temporaire Tailwind → Design System Kajou.
 * Mappe les classes Tailwind résiduelles vers les variables CSS du design system.
 * À SUPPRIMER une fois que toutes les vues utilisent les classes du design system.
 */

/* Espacements Tailwind → Design System */
.p-4 { padding: var(--space-sm); }
.p-6 { padding: var(--space-md); }
.p-8 { padding: var(--space-lg); }
.mb-4 { margin-bottom: var(--space-sm); }
.mb-6 { margin-bottom: var(--space-md); }
.mb-8 { margin-bottom: var(--space-lg); }
.gap-4 { gap: var(--space-sm); }
.gap-6 { gap: var(--space-md); }

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

/* Grille */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* Texte */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-sm { font-size: var(--fs-sm); }
.text-lg { font-size: var(--fs-lg); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }

/* Couleurs */
.text-gray-500 { color: var(--c-ink-muted); }
.text-gray-400 { color: var(--c-ink-soft); }
.text-green-600 { color: var(--c-primary); }
.text-red-600 { color: var(--c-danger); }

/* Backgrounds */
.bg-white { background: var(--c-surface); }
.bg-gray-50 { background: var(--c-surface-tint); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-full { border-radius: var(--radius-pill); }

/* Largeurs */
.w-full { width: 100%; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }

/* Caché */
.hidden { display: none !important; }