/* Thème généré automatiquement */

/* Mode clair (par défaut) */
:root {
  /* Couleurs primaires */
    --color-primary-50: #f8eded;
    --color-primary-100: #f0dbdb;
    --color-primary-200: #e0b8b8;
    --color-primary-300: #d19494;
    --color-primary-400: #c27070;
    --color-primary-500: #b34c4c;
    --color-primary-600: #9f4747;
    --color-primary-700: #8b4141;
    --color-primary-800: #783b3b;
    --color-primary-900: #542b2b;
    --color-primary-950: #321b1b;

  /* Couleurs secondaires */
    --color-secondary-50: #f7f2ed;
    --color-secondary-100: #efe6dc;
    --color-secondary-200: #deccba;
    --color-secondary-300: #ceb397;
    --color-secondary-400: #be9974;
    --color-secondary-500: #ad8052;
    --color-secondary-600: #9a734b;
    --color-secondary-700: #876645;
    --color-secondary-800: #75593e;
    --color-secondary-900: #52402d;
    --color-secondary-950: #31261c;

  /* Couleurs accent */
    --color-accent-50: #eaeefa;
    --color-accent-100: #d7ddf4;
    --color-accent-200: #afbbe9;
    --color-accent-300: #8899dd;
    --color-accent-400: #6077d2;
    --color-accent-500: #3855c7;
    --color-accent-600: #364eb0;
    --color-accent-700: #334799;
    --color-accent-800: #2f4084;
    --color-accent-900: #232f5c;
    --color-accent-950: #161d36;

  /* Couleurs de statut */
    --color-success-50: #e6fef6;
    --color-success-100: #cffced;
    --color-success-200: #a1f7da;
    --color-success-300: #72f3c8;
    --color-success-400: #43efb6;
    --color-success-500: #14eba4;
    --color-success-600: #17ce92;
    --color-success-700: #19b380;
    --color-success-800: #19996f;
    --color-success-900: #156b4e;
    --color-success-950: #0e3e2e;
    --color-danger-50: #f0faea;
    --color-danger-100: #e1f5d6;
    --color-danger-200: #c3e9af;
    --color-danger-300: #a6de87;
    --color-danger-400: #88d35f;
    --color-danger-500: #6ac837;
    --color-danger-600: #60b135;
    --color-danger-700: #579a32;
    --color-danger-800: #4c842e;
    --color-danger-900: #375d23;
    --color-danger-950: #213716;
    --color-warning-50: #f6f1ee;
    --color-warning-100: #eee4dd;
    --color-warning-200: #dbc9bd;
    --color-warning-300: #c9ae9c;
    --color-warning-400: #b8937a;
    --color-warning-500: #a67859;
    --color-warning-600: #936c52;
    --color-warning-700: #82614a;
    --color-warning-800: #705542;
    --color-warning-900: #4f3d30;
    --color-warning-950: #2f251e;

  /* Couleurs de base - mode clair */
  --color-background: #ffffff;
  --color-surface: #f9fafb;
  --color-surface-hover: #f3f4f6;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;
  --color-text-on-primary: #ffffff;
  --color-text-on-secondary: #ffffff;
  --color-text-on-accent: #ffffff;
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
  :root {
    /* Les couleurs principales restent les mêmes */
    /* Mais on ajuste les couleurs de base */
    --color-background: #0f172a;
    --color-surface: #1e293b;
    --color-surface-hover: #334155;
    --color-border: #334155;
    --color-border-strong: #475569;
    
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-tertiary: #94a3b8;
  }
}

/* Classes utilitaires Tailwind-like */

/* Backgrounds */
.bg-primary { background-color: var(--color-primary-500); }
.bg-primary-50 { background-color: var(--color-primary-50); }
.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-primary-200 { background-color: var(--color-primary-200); }
.bg-primary-300 { background-color: var(--color-primary-300); }
.bg-primary-400 { background-color: var(--color-primary-400); }
.bg-primary-500 { background-color: var(--color-primary-500); }
.bg-primary-600 { background-color: var(--color-primary-600); }
.bg-primary-700 { background-color: var(--color-primary-700); }
.bg-primary-800 { background-color: var(--color-primary-800); }
.bg-primary-900 { background-color: var(--color-primary-900); }

.bg-secondary { background-color: var(--color-secondary-500); }
.bg-secondary-50 { background-color: var(--color-secondary-50); }
.bg-secondary-100 { background-color: var(--color-secondary-100); }
.bg-secondary-200 { background-color: var(--color-secondary-200); }
.bg-secondary-300 { background-color: var(--color-secondary-300); }
.bg-secondary-400 { background-color: var(--color-secondary-400); }
.bg-secondary-500 { background-color: var(--color-secondary-500); }
.bg-secondary-600 { background-color: var(--color-secondary-600); }
.bg-secondary-700 { background-color: var(--color-secondary-700); }
.bg-secondary-800 { background-color: var(--color-secondary-800); }
.bg-secondary-900 { background-color: var(--color-secondary-900); }

.bg-accent { background-color: var(--color-accent-500); }
.bg-success { background-color: var(--color-success-500); }
.bg-danger { background-color: var(--color-danger-500); }
.bg-warning { background-color: var(--color-warning-500); }

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

/* Text colors */
.text-primary { color: var(--color-primary-500); }
.text-primary-600 { color: var(--color-primary-600); }
.text-primary-700 { color: var(--color-primary-700); }

.text-secondary { color: var(--color-secondary-500); }
.text-accent { color: var(--color-accent-500); }
.text-success { color: var(--color-success-500); }
.text-danger { color: var(--color-danger-500); }
.text-warning { color: var(--color-warning-500); }

.text-base { color: var(--color-text-primary); }
.text-muted { color: var(--color-text-secondary); }
.text-subtle { color: var(--color-text-tertiary); }
.text-on-primary { color: var(--color-text-on-primary); }

/* Borders */
.border-primary { border-color: var(--color-primary-500); }
.border-secondary { border-color: var(--color-secondary-500); }
.border-accent { border-color: var(--color-accent-500); }
.border-success { border-color: var(--color-success-500); }
.border-danger { border-color: var(--color-danger-500); }
.border-warning { border-color: var(--color-warning-500); }
.border { border-color: var(--color-border); }
.border-strong { border-color: var(--color-border-strong); }

/* Hover states */
.hover\:bg-primary-600:hover { background-color: var(--color-primary-600); }
.hover\:bg-primary-700:hover { background-color: var(--color-primary-700); }
.hover\:bg-secondary-600:hover { background-color: var(--color-secondary-600); }
.hover\:bg-surface:hover { background-color: var(--color-surface-hover); }

.hover\:text-primary-600:hover { color: var(--color-primary-600); }
.hover\:text-primary-700:hover { color: var(--color-primary-700); }

/* Focus states */
.focus\:ring-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-200);
}

@media (prefers-color-scheme: dark) {
  .focus\:ring-primary:focus {
    box-shadow: 0 0 0 3px var(--color-primary-800);
  }
}

/* Composants pré-stylés */
.btn-primary {
  background-color: var(--color-primary-500);
  color: var(--color-text-on-primary);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: background-color 0.2s;
}

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

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

.btn-secondary {
  background-color: var(--color-secondary-500);
  color: var(--color-text-on-secondary);
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: background-color 0.2s;
}

.btn-secondary:hover {
  background-color: var(--color-secondary-600);
}

.link {
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color 0.2s;
}

.link:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1rem;
}

.badge-success {
  background-color: var(--color-success-100);
  color: var(--color-success-700);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-danger {
  background-color: var(--color-danger-100);
  color: var(--color-danger-700);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

@media (prefers-color-scheme: dark) {
  .badge-success {
    background-color: var(--color-success-900);
    color: var(--color-success-200);
  }

  .badge-danger {
    background-color: var(--color-danger-900);
    color: var(--color-danger-200);
  }
}
.withphoto {
  background-image: url('/api/storage/download/16');
  background-size: cover;
  background-position: center;
}