@import "tailwindcss";

/* Configuration Tailwind v4 via CSS custom properties */
@layer base {
  :root {
    --font-heading: 'Dela Gothic One', sans-serif;
    --font-body: 'Roboto', sans-serif;
    
    /* Couleurs personnalisées La Banquise */
    --color-banquise-blue: 64, 180, 255; /* RGB for reuse in rgba() */
    --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;
  }
}

/* Variables CSS pour les polices et couleurs personnalisées */
:root {
  --font-heading: 'Dela Gothic One', sans-serif;
  --font-body: 'Roboto', sans-serif;

  /* Couleurs personnalisées La Banquise */
  --color-banquise-blue: 64, 180, 255; /* RGB for reuse in rgba() */
  --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;
}

/* Minimal, valid utility helpers that rely on CSS variables and rgba() */
@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() and the stored RGB variables */
  .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 (use with existing Tailwind gradient utilities) */
  .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); }

  /* Simple shadow helpers */
  .shadow-banquise-blue-20 { box-shadow: 0 4px 6px -1px rgba(var(--color-banquise-blue), 0.20); }
}

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

.animate-gentle-float { animation: gentle-float 6s ease-in-out infinite; }

@keyframes bounce-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.scroll-to-top:hover { animation: bounce-up 0.6s ease-in-out; }

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-gentle-float,
  .animate-ping,
  .animate-pulse {
    animation: none !important;
  }
}

/* Global improvements */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Scrollbar styles for popup content */
.popup-content { scrollbar-width: thin; scrollbar-color: rgba(31,93,137,0.3) transparent; }
.popup-content::-webkit-scrollbar { width: 6px; }
.popup-content::-webkit-scrollbar-track { background: transparent; }
.popup-content::-webkit-scrollbar-thumb { background: rgba(31,93,137,0.3); border-radius: 3px; }
.popup-content::-webkit-scrollbar-thumb:hover { background: rgba(31,93,137,0.5); }