/* Template 4 color contract. Loaded after every LTR/RTL theme stylesheet. */

:root {
  /* Dynamic values are injected by the storefront palette configuration. */
  --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, #ecfdf5);
  --color-secondary: var(--dynamic-secondary, #64748b);
  --color-success: var(--dynamic-success, #10b981);
  --color-warning: var(--dynamic-warning, #f59e0b);
  --color-danger: var(--dynamic-danger, var(--dynamic-error, #ef4444));
  --color-info: var(--dynamic-info, #3b82f6);
  
  /* Variables dérivées pour la compatibilité */
  --primary-50: var(--dynamic-primary-light, #ecfdf5);
  --primary-100: var(--dynamic-primary-light, #d1fae5);
  --primary-200: var(--dynamic-primary-light, #a7f3d0);
  --primary-300: var(--color-primary-light);
  --primary-400: var(--color-primary);
  --primary-500: var(--color-primary);
  --primary-600: var(--color-primary);
  --primary-700: var(--color-primary-hover);
  --primary-800: var(--color-primary-hover);
  --primary-900: var(--color-primary-hover);

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

  /* 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;

  /* Compatibility aliases used by the legacy LTR stylesheet. */
  --color-gray-50: var(--gray-50);
  --color-gray-100: var(--gray-100);
  --color-gray-200: var(--gray-200);
  --color-gray-300: var(--gray-300);
  --color-gray-400: var(--gray-400);
  --color-gray-500: var(--gray-500);
  --color-gray-600: var(--gray-600);
  --color-gray-700: var(--gray-700);
  --color-gray-800: var(--gray-800);
  --color-gray-900: var(--gray-900);

  /* 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) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }

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

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

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

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

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

/* Authoritative component states for both LTR and RTL. */
.btn-primary,
.badge-primary,
.page-item.active .page-link,
.nav-pills .nav-link.active,
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.page-item.active .page-link:hover {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

.page-link,
.nav-tabs .nav-link.active {
  color: var(--color-primary);
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary) 22%, transparent);
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--color-primary);
}

/* É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 color-mix(in srgb, var(--color-primary) 15%, transparent);
  outline: none;
}

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