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

@layer base {
  :root {
    /* Couleurs luxe Or & Blanc */
    --luxury-gold: 45 95% 42%;
    --luxury-gold-light: 45 90% 48%;
    --luxury-gold-dark: 45 100% 38%;
    --luxury-white: 0 0% 100%;
    --luxury-cream: 45 50% 95%;
    --luxury-black: 0 0% 5%;
    
    /* Palette principale mise à jour avec thème luxe */
    --background: 0 0% 100%;
    --foreground: 0 0% 5%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 5%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 5%;
    --primary: 45 95% 42%;  /* Assombri de 55% à 42% pour meilleur contraste avec texte blanc */
    --primary-foreground: 0 0% 100%;
    --secondary: 45 50% 95%;
    --secondary-foreground: 0 0% 5%;
    --muted: 45 20% 96%;
    --muted-foreground: 0 0% 45%;
    --accent: 45 90% 65%;
    --accent-foreground: 0 0% 5%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 45 30% 89%;
    --input: 45 30% 89%;
    --ring: 45 95% 42%;  /* Aligné avec primary */
    --radius: 0.75rem;

    /* Couleurs de texte simplifiées */
    --text-primary: 0 0% 9%;
    --text-secondary: 0 0% 45%;
    --text-muted: 0 0% 64%;
    --surface-light: 0 0% 98%;
    --surface-muted: 0 0% 96%;
    --surface-elevated: 0 0% 100%;

    /* Gradients luxe */
    --gradient-primary: linear-gradient(135deg, hsl(45, 95%, 42%) 0%, hsl(45, 90%, 48%) 50%, hsl(45, 100%, 38%) 100%);
    --gradient-gold-text: linear-gradient(135deg, hsl(42, 100%, 50%) 0%, hsl(45, 100%, 58%) 40%, hsl(48, 100%, 65%) 60%, hsl(42, 100%, 50%) 100%);
    --gradient-subtle: linear-gradient(135deg, hsl(0, 0%, 100%) 0%, hsl(45, 50%, 98%) 100%);
    --gradient-dark: linear-gradient(135deg, hsl(0, 0%, 5%) 0%, hsl(45, 20%, 10%) 100%);
    --gradient-gold-bands: repeating-linear-gradient(90deg, hsl(45, 95%, 42%) 0px, hsl(45, 95%, 42%) 4px, hsl(0, 0%, 100%) 4px, hsl(0, 0%, 100%) 20px);
    
    /* Ombres dorées */
    --shadow-soft: 0 2px 20px -5px hsla(45, 95%, 55%, 0.15);
    --shadow-medium: 0 8px 30px -8px hsla(45, 95%, 55%, 0.25);
    --shadow-strong: 0 20px 60px -15px hsla(45, 95%, 55%, 0.35);
    --shadow-glow: 0 0 40px -5px hsla(45, 95%, 55%, 0.5);

    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 0 0% 5%;
    --sidebar-primary: 45 95% 42%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 45 50% 95%;
    --sidebar-accent-foreground: 0 0% 5%;
    --sidebar-border: 45 30% 89%;
    --sidebar-ring: 45 95% 42%;
  }

  .dark {
    --background: 0 0% 5%;
    --foreground: 0 0% 100%;
    --card: 0 0% 5%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 5%;
    --popover-foreground: 0 0% 100%;
    --primary: 45 95% 55%;
    --primary-foreground: 0 0% 5%;
    --secondary: 45 20% 15%;
    --secondary-foreground: 0 0% 100%;
    --muted: 45 20% 15%;
    --muted-foreground: 0 0% 70%;
    --accent: 45 90% 65%;
    --accent-foreground: 0 0% 5%;
    --destructive: 0 62% 30%;
    --destructive-foreground: 0 0% 98%;
    --border: 45 30% 20%;
    --input: 45 30% 20%;
    --ring: 45 95% 55%;
    
    /* Dark mode colors */
    --text-primary: 0 0% 98%;
    --text-secondary: 0 0% 63%;
    --text-muted: 0 0% 45%;
    --surface-light: 0 0% 6%;
    --surface-muted: 0 0% 8%;
    --surface-elevated: 0 0% 10%;

    --gradient-primary: linear-gradient(135deg, hsl(47.9, 95.8%, 53.1%) 0%, hsl(47.9, 95.8%, 63.1%) 50%, hsl(40, 90%, 50%) 100%);
    --gradient-subtle: linear-gradient(135deg, hsl(0, 0%, 6%) 0%, hsl(0, 0%, 8%) 100%);
    --gradient-dark: linear-gradient(135deg, hsl(0, 0%, 2%) 0%, hsl(0, 0%, 6%) 100%);

    --shadow-soft: 0 2px 20px -5px hsla(0, 0%, 0%, 0.3);
    --shadow-medium: 0 8px 30px -8px hsla(0, 0%, 0%, 0.4);
    --shadow-strong: 0 20px 60px -15px hsla(0, 0%, 0%, 0.5);
    --shadow-glow: 0 0 30px -5px hsla(47.9, 95.8%, 53.1%, 0.4);
    
    --sidebar-background: 0 0% 3.9%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 47.9 95.8% 53.1%;
    --sidebar-primary-foreground: 0 0% 9%;
    --sidebar-accent: 0 0% 14.9%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 0 0% 14.9%;
    --sidebar-ring: 47.9 95.8% 53.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    /* Padding pour compenser la barre de contact mobile */
    padding-top: clamp(0px, calc(768px - 100vw) * 999, 32px);
  }
}

/* Design System moderne */

/* Gradients modernes */
.gradient-primary {
  background: var(--gradient-primary);
}

.gradient-subtle {
  background: var(--gradient-subtle);
}

.gradient-dark {
  background: var(--gradient-dark);
}

/* Ombres sémantiques */
.shadow-soft {
  box-shadow: var(--shadow-soft);
}

.shadow-medium {
  box-shadow: var(--shadow-medium);
}

.shadow-strong {
  box-shadow: var(--shadow-strong);
}

.shadow-glow {
  box-shadow: var(--shadow-glow);
}

/* Surfaces sémantiques */
.surface-light {
  background-color: hsl(var(--surface-light));
}

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

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

/* Text colors sémantiques */
.text-primary {
  color: hsl(var(--text-primary));
}

.text-secondary {
  color: hsl(var(--text-secondary));
}

.text-muted {
  color: hsl(var(--text-muted));
}

/* Styles personnalisés pour le thème doré modernisé */

/* Animations modernes et fluides */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
  0%, 100% { 
    box-shadow: 0 0 20px hsl(var(--primary) / 0.3);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 30px hsl(var(--primary) / 0.5);
    transform: scale(1.02);
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Classes d'animation */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-slide-up {
  animation: slide-up 0.6s ease-out;
}

.animate-slide-in-left {
  animation: slide-in-left 0.8s ease-out;
}

.animate-slide-in-right {
  animation: slide-in-right 0.8s ease-out;
}

/* Effets hover modernes */
.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-strong);
}

.hover-scale {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-glow {
  transition: all 0.3s ease;
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow);
}


/* Transitions fluides */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-bounce {
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Bandes décoratives luxe Or & Blanc */
.luxury-bands-horizontal {
  position: relative;
  background: var(--gradient-gold-bands);
  height: 8px;
  width: 100%;
  box-shadow: var(--shadow-glow);
}

.luxury-bands-vertical {
  position: relative;
  background: repeating-linear-gradient(0deg, hsl(45, 95%, 55%) 0px, hsl(45, 95%, 55%) 4px, hsl(0, 0%, 100%) 4px, hsl(0, 0%, 100%) 20px);
  width: 8px;
  height: 100%;
  box-shadow: var(--shadow-glow);
}

.luxury-accent-top {
  border-top: 4px solid hsl(var(--primary));
  border-image: var(--gradient-primary) 1;
}

.luxury-accent-bottom {
  border-bottom: 4px solid hsl(var(--primary));
  border-image: var(--gradient-primary) 1;
}

.luxury-text-gold {
  background: var(--gradient-gold-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 600;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.luxury-shadow {
  box-shadow: var(--shadow-glow);
}