/*
 * themes.css — Coco Lodge Majunga
 * Surcharges CSS basées sur les variables de thème injectées par Theme::getCssVars()
 * Ce fichier est chargé APRÈS tailwind.css pour permettre les overrides.
 * Les variables --color-primary, --color-primary-dark, etc. sont définies en inline <style>
 * dans le <head> par header.php → Theme::getCssVars().
 *
 * STRATÉGIE : surcharger TOUTES les classes Tailwind "coco-gold-*" compilées en hex fixes,
 * ainsi que les gradients inline et les composants @layer components.
 */

/* ─────────────────────────────────────────────────────────────
   1. COULEURS BACKGROUND — bg-coco-gold-*
   ───────────────────────────────────────────────────────────── */

.bg-coco-gold-50  { background-color: var(--color-primary-50,   #fdf8f3) !important; }
.bg-coco-gold-100 { background-color: color-mix(in srgb, var(--color-primary-50, #fdf8f3) 70%, white) !important; }
.bg-coco-gold-200 { background-color: color-mix(in srgb, var(--color-primary-light, #dda470) 30%, white) !important; }
.bg-coco-gold-400 { background-color: var(--color-primary-light, #dda470) !important; }
.bg-coco-gold-500 { background-color: var(--color-primary,      #D4AF37) !important; }
.bg-coco-gold-600 { background-color: var(--color-primary-dark, #C5A059) !important; }

/* ─────────────────────────────────────────────────────────────
   2. COULEURS TEXTE — text-coco-gold-*
   ───────────────────────────────────────────────────────────── */

.text-coco-gold-300 { color: color-mix(in srgb, var(--color-primary-light, #dda470) 70%, white) !important; }
.text-coco-gold-400 { color: var(--color-primary-light, #dda470) !important; }
.text-coco-gold-500 { color: var(--color-primary,       #D4AF37) !important; }
.text-coco-gold-600 { color: var(--color-primary-dark,  #C5A059) !important; }
.text-coco-gold-700 { color: color-mix(in srgb, var(--color-primary-dark, #C5A059) 85%, black) !important; }

/* ─────────────────────────────────────────────────────────────
   3. COULEURS BORDURE — border-coco-gold-*
   ───────────────────────────────────────────────────────────── */

.border-coco-gold-200 { border-color: color-mix(in srgb, var(--color-primary-light, #dda470) 30%, white) !important; }
.border-coco-gold-300 { border-color: color-mix(in srgb, var(--color-primary, #D4AF37) 40%, white) !important; }
.border-coco-gold-500 { border-color: var(--color-primary,      #D4AF37) !important; }
.border-coco-gold-600 { border-color: var(--color-primary-dark, #C5A059) !important; }

/* ─────────────────────────────────────────────────────────────
   4. GRADIENTS — from-coco-gold-* / to-coco-gold-*
   Ces classes Tailwind gèrent --tw-gradient-from/to, mais avec
   !important sur background on surcharge directement les éléments
   qui utilisent bg-gradient-to-r + from-coco-gold-* + to-coco-gold-*
   ───────────────────────────────────────────────────────────── */

/* from-* : force la valeur CSS var sur --tw-gradient-from */
.from-coco-gold-300 { --tw-gradient-from: color-mix(in srgb, var(--color-primary-light, #dda470) 70%, white) !important; }
.from-coco-gold-400 { --tw-gradient-from: var(--color-primary-light, #dda470) !important; }
.from-coco-gold-500 { --tw-gradient-from: var(--color-primary,       #D4AF37) !important; }
.from-coco-gold-600 { --tw-gradient-from: var(--color-primary-dark,  #C5A059) !important; }
.from-coco-gold-700 { --tw-gradient-from: color-mix(in srgb, var(--color-primary-dark, #C5A059) 80%, black) !important; }
.from-coco-gold-900 { --tw-gradient-from: color-mix(in srgb, var(--color-primary-dark, #C5A059) 60%, black) !important; }

/* to-* */
.to-coco-gold-500 { --tw-gradient-to: var(--color-primary,      #D4AF37) !important; }
.to-coco-gold-600 { --tw-gradient-to: var(--color-primary-dark, #C5A059) !important; }
.to-coco-gold-700 { --tw-gradient-to: color-mix(in srgb, var(--color-primary-dark, #C5A059) 80%, black) !important; }

/* ─────────────────────────────────────────────────────────────
   5. HOVER — hover:bg-coco-gold-* / hover:text-* / hover:border-*
   ───────────────────────────────────────────────────────────── */

.hover\:bg-coco-gold-50:hover   { background-color: var(--color-primary-50,   #fdf8f3) !important; }
.hover\:bg-coco-gold-600:hover  { background-color: var(--color-primary-dark, #C5A059) !important; }
.hover\:bg-coco-gold-700:hover  { background-color: color-mix(in srgb, var(--color-primary-dark, #C5A059) 80%, black) !important; }

.hover\:text-coco-gold-400:hover { color: var(--color-primary-light, #dda470) !important; }
.hover\:text-coco-gold-700:hover { color: color-mix(in srgb, var(--color-primary-dark, #C5A059) 85%, black) !important; }
.hover\:text-coco-gold-800:hover { color: color-mix(in srgb, var(--color-primary-dark, #C5A059) 70%, black) !important; }

.hover\:border-coco-gold-400:hover { border-color: var(--color-primary-light, #dda470) !important; }
.hover\:border-coco-gold-500:hover { border-color: var(--color-primary,       #D4AF37) !important; }

/* hover: gradient (from/to) */
.hover\:from-coco-gold-600:hover { --tw-gradient-from: var(--color-primary-dark,  #C5A059) !important; }
.hover\:from-coco-gold-700:hover { --tw-gradient-from: color-mix(in srgb, var(--color-primary-dark, #C5A059) 80%, black) !important; }
.hover\:to-coco-gold-600:hover   { --tw-gradient-to:   var(--color-primary-dark,  #C5A059) !important; }
.hover\:to-coco-gold-700:hover   { --tw-gradient-to:   color-mix(in srgb, var(--color-primary-dark, #C5A059) 80%, black) !important; }

/* ─────────────────────────────────────────────────────────────
   6. FOCUS — focus:ring-* / focus:border-*
   ───────────────────────────────────────────────────────────── */

.focus\:ring-coco-gold-400:focus,
.focus\:ring-coco-gold-500:focus {
    --tw-ring-color: color-mix(in srgb, var(--color-primary, #D4AF37) 50%, transparent) !important;
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width, 0px)) var(--tw-ring-color) !important;
}

.focus\:border-coco-gold-400:focus,
.focus\:border-coco-gold-500:focus {
    border-color: var(--color-primary, #D4AF37) !important;
}

/* ─────────────────────────────────────────────────────────────
   7. SHADOW — hover:shadow-coco-gold-*
   ───────────────────────────────────────────────────────────── */

.hover\:shadow-coco-gold-100:hover {
    --tw-shadow-color: color-mix(in srgb, var(--color-primary, #D4AF37) 20%, transparent) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

/* ─────────────────────────────────────────────────────────────
   8. COMPOSANTS @layer (compilés dans tailwind.css avec hex fixes)
   ───────────────────────────────────────────────────────────── */

.btn-primary {
    background: linear-gradient(to right, var(--color-primary-dark, #C5A059), var(--color-primary, #D4AF37)) !important;
    color: white !important;
    box-shadow: 0 4px 14px 0 color-mix(in srgb, var(--color-primary, #D4AF37) 40%, transparent) !important;
}

.btn-primary:hover {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--color-primary-dark, #C5A059) 80%, black),
        color-mix(in srgb, var(--color-primary, #D4AF37) 80%, black)
    ) !important;
    box-shadow: 0 6px 20px 0 color-mix(in srgb, var(--color-primary, #D4AF37) 50%, transparent) !important;
}

.btn-secondary {
    color: var(--color-primary-dark, #C5A059) !important;
    border-color: color-mix(in srgb, var(--color-primary, #D4AF37) 45%, white) !important;
}

.btn-secondary:hover {
    background-color: var(--color-primary-50, #fdf8f3) !important;
    border-color: var(--color-primary, #D4AF37) !important;
}

/* ─────────────────────────────────────────────────────────────
   9. GRADIENT TEXT & DÉCORATIFS
   ───────────────────────────────────────────────────────────── */

.gradient-text {
    background: linear-gradient(135deg, var(--color-primary-dark, #C5A059) 0%, var(--color-primary, #D4AF37) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Classe bg-gradient-gold utilisée dans header.php (underline nav) */
.bg-gradient-gold {
    background: linear-gradient(to right, var(--color-primary-dark, #C5A059), var(--color-primary, #D4AF37)) !important;
}

/* ─────────────────────────────────────────────────────────────
   10. NAVIGATION — surcharges directes des éléments inline
   ───────────────────────────────────────────────────────────── */

/* Bouton "Réserver" dans la nav (classe inline dans header.php) */
nav a.bg-gradient-to-r,
nav a[class*="from-coco-gold"],
a[class*="from-coco-gold"][class*="to-coco-gold"] {
    background: linear-gradient(to right, var(--color-primary-dark, #C5A059), var(--color-primary, #D4AF37)) !important;
}

/* Lien actif dans la nav */
a.text-coco-gold-700.bg-coco-gold-50,
nav a[class*="text-coco-gold"] {
    color: color-mix(in srgb, var(--color-primary-dark, #C5A059) 85%, black) !important;
}

/* Underline hover sur les liens nav */
span.bg-gradient-gold {
    background: linear-gradient(to right, var(--color-primary-dark, #C5A059), var(--color-primary, #D4AF37)) !important;
}

/* ─────────────────────────────────────────────────────────────
   11. FOOTER
   ───────────────────────────────────────────────────────────── */

footer [class*="from-coco-gold"],
footer [class*="bg-coco-gold"] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary-dark, #C5A059) 90%, black),
        var(--color-primary-dark, #C5A059)
    ) !important;
}

/* ─────────────────────────────────────────────────────────────
   12. FORMULAIRES — focus rings & inputs
   ───────────────────────────────────────────────────────────── */

input:focus, select:focus, textarea:focus {
    border-color: var(--color-primary, #D4AF37) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #D4AF37) 20%, transparent) !important;
    outline: none;
}

/* ─────────────────────────────────────────────────────────────
   13. SCROLLBAR
   ───────────────────────────────────────────────────────────── */

::-webkit-scrollbar-thumb {
    background: var(--color-primary-dark, #C5A059) !important;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary, #D4AF37) !important;
}

/* ─────────────────────────────────────────────────────────────
   14. SÉLECTION TEXTE
   ───────────────────────────────────────────────────────────── */

::selection {
    background: var(--color-primary, #D4AF37);
    color: white;
}

/* ─────────────────────────────────────────────────────────────
   15. TYPOGRAPHIE — police d'affichage
   ───────────────────────────────────────────────────────────── */

.font-display,
h1.font-display,
h2.font-display,
h3.font-display,
[class*="font-display"] {
    font-family: var(--font-display, '"Playfair Display", serif') !important;
}

/* ─────────────────────────────────────────────────────────────
   16. DARK MODE — thème "dark-gold"
   ───────────────────────────────────────────────────────────── */

[data-theme="dark-gold"] {
    color-scheme: dark;
}

[data-theme="dark-gold"] .prose { color: #d1d5db; }
[data-theme="dark-gold"] .prose h1,
[data-theme="dark-gold"] .prose h2,
[data-theme="dark-gold"] .prose h3 { color: #f9fafb; }
[data-theme="dark-gold"] .prose a  { color: var(--color-primary, #D4AF37); }
[data-theme="dark-gold"] .prose blockquote {
    border-left-color: var(--color-primary, #D4AF37);
    color: #9ca3af;
}

/* Sections sombres */
[data-theme="dark-gold"] section.bg-gradient-to-br.from-gray-50,
[data-theme="dark-gold"] section.py-20.bg-white,
[data-theme="dark-gold"] .py-12.bg-gray-50 { background: #0f172a !important; }

/* Cards */
[data-theme="dark-gold"] .card {
    background-color: #1f2937 !important;
    border-color: #374151;
}
[data-theme="dark-gold"] .bg-gradient-to-br.from-gray-50.to-white { background: #1f2937 !important; }

/* Formulaire réservation */
[data-theme="dark-gold"] .bg-gray-50.min-h-screen { background-color: #0f172a !important; }

/* Tables */
[data-theme="dark-gold"] table thead { background-color: #1f2937 !important; color: #d1d5db; }
[data-theme="dark-gold"] table tbody tr:nth-child(even) { background-color: #1f2937 !important; }
[data-theme="dark-gold"] table tbody tr:hover { background-color: #374151 !important; }
