/*
 * PALETTE DE COULEURS DYNAMIQUE POUR TEMPLATE4
 * Les couleurs sont définies dynamiquement par l'AppController
 * Ce fichier utilise uniquement des variables CSS qui seront injectées
 */

:root {
  /* Variables CSS dynamiques - définies par l'AppController */
  /* Ces variables seront injectées via la balise <style> dans le layout */
  
  /* Variables de base pour les couleurs dynamiques */
  --white: #ffffff;
  --black: #000000;
  --color-primary: var(--dynamic-primary, #059669);
  --color-primary-hover: var(--dynamic-primary-hover, #047857);
  --color-primary-light: var(--dynamic-primary-light, #93C5FD);
  --color-secondary: var(--dynamic-secondary, #64748B);
  --color-success: var(--dynamic-success, #10B981);
  --color-warning: var(--dynamic-warning, #F59E0B);
  --color-danger: var(--dynamic-danger, #EF4444);
  --color-info: var(--dynamic-info, #3B82F6);
  
  /* Variables dérivées pour la compatibilité */
  --primary-50: #ecfdf5;
  --primary-100: #d1fae5;
  --primary-200: #a7f3d0;
  --primary-300: var(--color-primary-light);
  --primary-400: #34d399;
  --primary-500: var(--color-success);
  --primary-600: var(--color-primary);
  --primary-700: var(--color-primary-hover);
  --primary-800: #065f46;
  --primary-900: #064e3b;

  /* Couleurs secondaires */
  --secondary-50: #fffbeb;
  --secondary-100: #fef3c7;
  --secondary-200: #fde68a;
  --secondary-300: #fcd34d;
  --secondary-400: #fbbf24;
  --secondary-500: var(--color-warning);
  --secondary-600: #d97706;
  --secondary-700: #b45309;
  --secondary-800: #92400e;
  --secondary-900: #78350f;

  /* Couleurs d'erreur */
  --error-50: #fef2f2;
  --error-100: #fee2e2;

  /* Couleurs neutres (gris modernes) */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: var(--color-secondary);
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Couleurs fonctionnelles */
  --success: var(--color-success);
  --warning: var(--color-warning);
  --error: var(--color-danger);
  --info: var(--color-info);
  
  /* Social Colors */
  --whatsapp: #25D366;

  /* Ombres et effets */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Bordures et radius */
  --border: 1px solid #e5e7eb;
  --border-2: 2px solid #e5e7eb;
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-colors: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-transform: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-opacity: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Classes utilitaires pour les couleurs */
.text-primary { color: var(--color-primary); }
.bg-primary { background-color: var(--color-primary); }
.border-primary { border-color: var(--color-primary); }

.text-primary-hover { color: var(--color-primary-hover); }
.bg-primary-hover { background-color: var(--color-primary-hover); }
.border-primary-hover { border-color: var(--color-primary-hover); }

.text-success { color: var(--color-success); }
.bg-success { background-color: var(--color-success); }
.border-success { border-color: var(--color-success); }

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

.text-danger { color: var(--color-danger); }
.bg-danger { background-color: var(--color-danger); }
.border-danger { border-color: var(--color-danger); }

.text-info { color: var(--color-info); }
.bg-info { background-color: var(--color-info); }
.border-info { border-color: var(--color-info); }

/* États de survol */
.hover\:bg-primary:hover { background-color: var(--color-primary-hover); }
.hover\:text-primary:hover { color: var(--color-primary-hover); }
.hover\:border-primary:hover { border-color: var(--color-primary-hover); }

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

/* Responsive design */
@media (max-width: 768px) {
  :root {
    --radius-lg: 0.375rem;
    --radius-xl: 0.5rem;
  }
}