@import "tailwindcss";

/* Configuration Tailwind v4 via CSS custom properties - Variables globales */
@layer base {
  :root {
    /* Polices */
    --font-heading: 'Dela Gothic One', sans-serif;
    --font-body: 'Roboto', sans-serif;
    
    /* Couleurs personnalisées La Banquise */
    --color-banquise-blue: 64, 180, 255;
    --color-banquise-blue-hex: #40B4FF;
    --color-banquise-blue-dark: 31, 93, 137;
    --color-banquise-blue-dark-hex: #1F5D89;
    --color-banquise-blue-light: 105, 183, 226;
    --color-banquise-blue-light-hex: #69B7E2;
    --color-banquise-blue-lightest: 165, 240, 255;
    --color-banquise-blue-lightest-hex: #A5F0FF;
    --color-banquise-gray: #F6F6F6;
    
    /* Transitions communes */
    --transition-default: all 0.3s ease-in-out;
    --transition-fast: all 0.2s ease-in-out;
    
    /* Spacing commun */
    --spacing-navbar: 4rem;
  }
}

/* Minimal, valid utility helpers avec variables optimisées */
@layer utilities {
  /* Text colors */
  .text-banquise-blue { color: var(--color-banquise-blue-hex); }
  .text-banquise-blue-dark { color: var(--color-banquise-blue-dark-hex); }
  .text-banquise-blue-light { color: var(--color-banquise-blue-light-hex); }
  .text-banquise-blue-lightest { color: var(--color-banquise-blue-lightest-hex); }
  .text-banquise-gray { color: var(--color-banquise-gray); }

  /* Background colors */
  .bg-banquise-blue { background-color: var(--color-banquise-blue-hex); }
  .bg-banquise-blue-dark { background-color: var(--color-banquise-blue-dark-hex); }
  .bg-banquise-blue-light { background-color: var(--color-banquise-blue-light-hex); }
  .bg-banquise-blue-lightest { background-color: var(--color-banquise-blue-lightest-hex); }
  .bg-banquise-gray { background-color: var(--color-banquise-gray); }

  /* Opacity helpers using rgba() */
  .bg-banquise-blue-5 { background-color: rgba(var(--color-banquise-blue), 0.05); }
  .bg-banquise-blue-10 { background-color: rgba(var(--color-banquise-blue), 0.10); }
  .bg-banquise-blue-20 { background-color: rgba(var(--color-banquise-blue), 0.20); }
  .bg-banquise-blue-dark-10 { background-color: rgba(var(--color-banquise-blue-dark), 0.10); }

  /* Border colors */
  .border-banquise-blue { border-color: var(--color-banquise-blue-hex); }
  .border-banquise-blue-lightest-30 { border-color: rgba(var(--color-banquise-blue-lightest), 0.3); }

  /* Gradients shortcuts */
  .from-banquise-blue { --tw-gradient-from: var(--color-banquise-blue-hex); }
  .from-banquise-blue-dark { --tw-gradient-from: var(--color-banquise-blue-dark-hex); }
  .via-banquise-blue { --tw-gradient-via: var(--color-banquise-blue-hex); }
  .to-banquise-blue { --tw-gradient-to: var(--color-banquise-blue-hex); }

  /* Shadow helpers */
  .shadow-banquise-blue-20 { box-shadow: 0 4px 6px -1px rgba(var(--color-banquise-blue), 0.20); }
  
  /* Transitions communes */
  .transition-default { transition: var(--transition-default); }
  .transition-fast { transition: var(--transition-fast); }
}

/* Animations optimisées */
@keyframes gentle-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(1deg); }
}

@keyframes bounce-up { 
  0%, 100% { transform: translateY(0); } 
  50% { transform: translateY(-4px); } 
}

.animate-gentle-float { animation: gentle-float 6s ease-in-out infinite; }
.scroll-to-top:hover { animation: bounce-up 0.6s ease-in-out; }

/* Configuration globale optimisée */
@media (prefers-reduced-motion: reduce) {
  .animate-gentle-float,
  .animate-ping,
  .animate-pulse {
    animation: none !important;
  }
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Scrollbar unifié pour tous les éléments */
.custom-scrollbar,
.popup-content { 
  scrollbar-width: thin; 
  scrollbar-color: rgba(31,93,137,0.3) transparent; 
}

.custom-scrollbar::-webkit-scrollbar,
.popup-content::-webkit-scrollbar { width: 6px; }

.custom-scrollbar::-webkit-scrollbar-track,
.popup-content::-webkit-scrollbar-track { background: transparent; }

.custom-scrollbar::-webkit-scrollbar-thumb,
.popup-content::-webkit-scrollbar-thumb { 
  background: rgba(31,93,137,0.3); 
  border-radius: 3px; 
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.popup-content::-webkit-scrollbar-thumb:hover { 
  background: rgba(31,93,137,0.5); 
}