/* Mode sombre personnalisé pour Kiyomi Head Spa */

/* Variables CSS pour la cohérence des couleurs */
:root {
  --primary-color: #8B7355;
  --secondary-color: #F5F2ED;
  --accent-color: #a68864;
  
  /* Mode clair */
  --bg-primary-light: #ffffff;
  --bg-secondary-light: #f5f2ed;
  --text-primary-light: #1f2937;
  --text-secondary-light: #6b7280;
  --border-light: #e5e7eb;
  
  /* Mode sombre */
  --bg-primary-dark: #111827;
  --bg-secondary-dark: #1f2937;
  --text-primary-dark: #f9fafb;
  --text-secondary-dark: #d1d5db;
  --border-dark: #374151;
}

/* Transitions globales pour un changement fluide */
* {
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Améliorations spécifiques au mode sombre */
.dark {
  /* Ajustement des images en mode sombre */
  img:not([class*="logo"]) {
    filter: brightness(0.85) contrast(1.1);
  }
  
  /* Amélioration des ombres en mode sombre */
  .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 
                0 4px 6px -2px rgba(0, 0, 0, 0.1);
  }
  
  .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  }
  
  /* Amélioration du backdrop-blur en mode sombre */
  .backdrop-blur-md {
    backdrop-filter: blur(12px) saturate(180%);
  }
}

/* Améliorations pour les cartes en mode sombre */
.dark .card-hover {
  background-color: var(--bg-secondary-dark);
  border: 1px solid var(--border-dark);
}

.dark .card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border-color: var(--primary-color);
}

/* Amélioration du formulaire en mode sombre */
.dark .form-input {
  background-color: #374151;
  border: 1px solid #4b5563;
  color: #f9fafb;
}

.dark .form-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.2);
  background-color: #4b5563;
}

.dark .form-input::placeholder {
  color: #9ca3af;
}

/* Améliorations pour les boutons en mode sombre */
.dark .btn-primary:hover {
  background-color: var(--accent-color);
  box-shadow: 0 10px 25px rgba(139, 115, 85, 0.3);
}

/* Amélioration de la navigation en mode sombre */
.dark nav {
  background-color: rgba(17, 24, 39, 0.95);
  border-bottom: 1px solid #374151;
}

/* Indicateur visuel pour le toggle de thème */
#theme-toggle {
  position: relative;
  overflow: hidden;
}

#theme-toggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: var(--primary-color);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
  z-index: -1;
}

#theme-toggle:hover::before {
  width: 100%;
  height: 100%;
}

/* Animation pour le chat bubble en mode sombre */
.dark .chat-bubble {
  box-shadow: 0 10px 25px rgba(139, 115, 85, 0.3);
}

.dark .chat-bubble:hover {
  box-shadow: 0 15px 35px rgba(139, 115, 85, 0.4);
}

/* Amélioration des témoignages en mode sombre */
.dark .testimonial-card {
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
  border: 1px solid #4b5563;
}

/* Amélioration des étoiles en mode sombre */
.dark .ri-star-fill {
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

/* Animation d'apparition pour les éléments en mode sombre */
.dark .animate-on-scroll {
  opacity: 0.8;
}

.dark .animate-on-scroll.animate-in {
  opacity: 1;
}

/* Amélioration des liens en mode sombre */
.dark a:hover {
  color: var(--accent-color);
  text-shadow: 0 0 8px rgba(166, 136, 100, 0.3);
}

/* Scrollbar personnalisée en mode sombre */
.dark::-webkit-scrollbar {
  width: 8px;
}

.dark::-webkit-scrollbar-track {
  background: #1f2937;
}

.dark::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}

.dark::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* Media queries pour les préférences système */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* Amélioration de l'accessibilité en mode sombre */
.dark :focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Amélioration des sélections de texte en mode sombre */
.dark ::selection {
  background-color: rgba(139, 115, 85, 0.3);
  color: #f9fafb;
}