@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Couleurs principales */
  --color-primary: #1a1a1a; /* Noir anthracite */
  --color-secondary: #f5f3f0; /* Beige chaud */
  --color-accent: #2c5545; /* Vert profond */
  --color-success: #d1fae5;
  --color-warning: #ffedd5;
  --color-error: #fee2e2;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-secondary);
  color: var(--color-primary);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

/* Typographie */
h1, h2, h3, h4 {
  font-weight: 500;
  line-height: 1.3;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }

p {
  font-weight: 400;
  color: #4a4a4a;
}

/* Boutons */
.btn {
  @apply py-4 px-8 rounded-lg font-medium text-lg transition-all;
}

.btn-primary {
  background-color: var(--color-primary);
  color: white;
}

.btn-primary:hover {
  background-color: #2a2a2a;
}

.btn-secondary {
  background-color: white;
  color: var(--color-primary);
  border: 1px solid #e5e7eb;
}

.btn-secondary:hover {
  background-color: #f9f9f9;
}

/* Cartes */
.card {
  @apply bg-white rounded-xl p-6;
  border: 1px solid #e5e7eb;
}

/* Formulaires */
.input {
  @apply w-full p-4 rounded-lg border border-gray-200 focus:border-gray-400;
  font-size: 1.125rem;
}

.label {
  @apply block text-sm text-gray-600 mb-2;
}

/* États */
.success-bg {
  background-color: var(--color-success);
}

.warning-bg {
  background-color: var(--color-warning);
}

.error-bg {
  background-color: var(--color-error);
}

/* Animations subtiles */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
  opacity: 0;
}

/* Espacement */
.container {
  @apply max-w-md mx-auto px-4;
}

.spacing-y > * + * {
  @apply mt-6;
}

/* Mode sombre (optionnel) */
.dark-mode {
  background-color: #1a1a1a;
  color: white;
}

.dark-mode .card {
  background-color: #2a2a2a;
  border-color: #3a3a3a;
}