/**
 * palettes.css - Système de palettes de couleurs personnalisables
 * Compatible mode clair et mode sombre
 * Respecte les normes d'accessibilité WCAG 2.1 (contraste minimum 4.5:1)
 */

/* ============================================
   🔵 PALETTE OCÉAN (Défaut)
   ============================================ */
:root[data-palette="ocean"],
:root {
    /* Couleurs primaires */
    --color-primary: #3B82F6;           /* Bleu vif */
    --color-primary-hover: #2563EB;     /* Bleu foncé */
    --color-primary-light: #DBEAFE;     /* Bleu très clair */
    --color-primary-dark: #1E40AF;      /* Bleu profond */
    
    /* Couleurs secondaires */
    --color-secondary: #06B6D4;         /* Cyan */
    --color-secondary-hover: #0891B2;   /* Cyan foncé */
    --color-secondary-light: #CFFAFE;   /* Cyan clair */
    
    /* Couleurs d'accent */
    --color-accent: #8B5CF6;            /* Violet */
    --color-accent-hover: #7C3AED;      /* Violet foncé */
    --color-accent-light: #EDE9FE;      /* Violet clair */
    
    /* Success/Warning/Error */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
}

:root.dark[data-palette="ocean"],
:root.dark {
    --color-primary: #60A5FA;           /* Bleu clair (pour contraste sur fond sombre) */
    --color-primary-hover: #3B82F6;
    --color-primary-light: #1E3A8A;     /* Bleu très foncé */
    --color-primary-dark: #93C5FD;      /* Bleu clair */
    
    --color-secondary: #22D3EE;         /* Cyan lumineux */
    --color-secondary-hover: #06B6D4;
    --color-secondary-light: #164E63;   /* Cyan foncé */
    
    --color-accent: #A78BFA;            /* Violet clair */
    --color-accent-hover: #8B5CF6;
    --color-accent-light: #4C1D95;      /* Violet très foncé */
}

/* ============================================
   🟢 PALETTE NATURE
   ============================================ */
:root[data-palette="nature"] {
    --color-primary: #10B981;           /* Vert émeraude */
    --color-primary-hover: #059669;
    --color-primary-light: #D1FAE5;
    --color-primary-dark: #047857;
    
    --color-secondary: #84CC16;         /* Lime */
    --color-secondary-hover: #65A30D;
    --color-secondary-light: #ECFCCB;
    
    --color-accent: #14B8A6;            /* Teal */
    --color-accent-hover: #0D9488;
    --color-accent-light: #CCFBF1;
}

:root.dark[data-palette="nature"] {
    --color-primary: #34D399;           /* Vert clair */
    --color-primary-hover: #10B981;
    --color-primary-light: #064E3B;
    --color-primary-dark: #6EE7B7;
    
    --color-secondary: #A3E635;         /* Lime lumineux */
    --color-secondary-hover: #84CC16;
    --color-secondary-light: #365314;
    
    --color-accent: #2DD4BF;            /* Teal clair */
    --color-accent-hover: #14B8A6;
    --color-accent-light: #134E4A;
}

/* ============================================
   🟣 PALETTE SUNSET
   ============================================ */
:root[data-palette="sunset"] {
    --color-primary: #A855F7;           /* Violet */
    --color-primary-hover: #9333EA;
    --color-primary-light: #F3E8FF;
    --color-primary-dark: #7E22CE;
    
    --color-secondary: #EC4899;         /* Rose */
    --color-secondary-hover: #DB2777;
    --color-secondary-light: #FCE7F3;
    
    --color-accent: #F97316;            /* Orange */
    --color-accent-hover: #EA580C;
    --color-accent-light: #FFEDD5;
}

:root.dark[data-palette="sunset"] {
    --color-primary: #C084FC;           /* Violet clair */
    --color-primary-hover: #A855F7;
    --color-primary-light: #581C87;
    --color-primary-dark: #E9D5FF;
    
    --color-secondary: #F472B6;         /* Rose clair */
    --color-secondary-hover: #EC4899;
    --color-secondary-light: #831843;
    
    --color-accent: #FB923C;            /* Orange clair */
    --color-accent-hover: #F97316;
    --color-accent-light: #7C2D12;
}

/* ============================================
   🟠 PALETTE EMBER
   ============================================ */
:root[data-palette="ember"] {
    --color-primary: #F97316;           /* Orange */
    --color-primary-hover: #EA580C;
    --color-primary-light: #FFEDD5;
    --color-primary-dark: #C2410C;
    
    --color-secondary: #EF4444;         /* Rouge */
    --color-secondary-hover: #DC2626;
    --color-secondary-light: #FEE2E2;
    
    --color-accent: #FBBF24;            /* Ambre */
    --color-accent-hover: #F59E0B;
    --color-accent-light: #FEF3C7;
}

:root.dark[data-palette="ember"] {
    --color-primary: #FB923C;           /* Orange clair */
    --color-primary-hover: #F97316;
    --color-primary-light: #7C2D12;
    --color-primary-dark: #FDBA74;
    
    --color-secondary: #F87171;         /* Rouge clair */
    --color-secondary-hover: #EF4444;
    --color-secondary-light: #7F1D1D;
    
    --color-accent: #FCD34D;            /* Ambre clair */
    --color-accent-hover: #FBBF24;
    --color-accent-light: #78350F;
}

/* ============================================
   ⚫ PALETTE MONOCHROME
   ============================================ */
:root[data-palette="monochrome"] {
    --color-primary: #374151;           /* Gris foncé */
    --color-primary-hover: #1F2937;
    --color-primary-light: #F3F4F6;
    --color-primary-dark: #111827;
    
    --color-secondary: #6B7280;         /* Gris moyen */
    --color-secondary-hover: #4B5563;
    --color-secondary-light: #E5E7EB;
    
    --color-accent: #9CA3AF;            /* Gris clair */
    --color-accent-hover: #6B7280;
    --color-accent-light: #D1D5DB;
}

:root.dark[data-palette="monochrome"] {
    --color-primary: #9CA3AF;           /* Gris clair */
    --color-primary-hover: #D1D5DB;
    --color-primary-light: #1F2937;
    --color-primary-dark: #F3F4F6;
    
    --color-secondary: #6B7280;         /* Gris moyen */
    --color-secondary-hover: #9CA3AF;
    --color-secondary-light: #374151;
    
    --color-accent: #4B5563;            /* Gris foncé */
    --color-accent-hover: #6B7280;
    --color-accent-light: #111827;
}

/* ============================================
   🎨 CLASSES UTILITAIRES
   Permet d'utiliser les couleurs de palette
   ============================================ */

/* Backgrounds */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-accent { background-color: var(--color-accent) !important; }

/* Text colors */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-accent { color: var(--color-accent) !important; }

/* Borders */
.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-accent { border-color: var(--color-accent) !important; }

/* Hover states */
.hover\:bg-primary:hover { background-color: var(--color-primary-hover) !important; }
.hover\:bg-secondary:hover { background-color: var(--color-secondary-hover) !important; }
.hover\:text-primary:hover { color: var(--color-primary-hover) !important; }

/* Buttons avec palettes */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
}
.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: white;
}
.btn-secondary:hover {
    background-color: var(--color-secondary-hover);
}

/* Badges */
.badge-primary {
    background-color: var(--color-primary-light);
    color: var(--color-primary-dark);
}

.badge-secondary {
    background-color: var(--color-secondary-light);
    color: var(--color-secondary-hover);
}

/* ============================================
   🔧 OVERRIDE TAILWIND COLORS WITH CSS VARS
   Remplace les couleurs Tailwind hardcodées
   ============================================ */

/* Remplacer bg-blue-* par les couleurs de palette */
.bg-blue-50 { background-color: var(--color-primary-light) !important; }
.bg-blue-100 { background-color: var(--color-primary-light) !important; }
.bg-blue-500 { background-color: var(--color-primary) !important; }
.bg-blue-600 { background-color: var(--color-primary) !important; }
.bg-blue-700 { background-color: var(--color-primary-hover) !important; }

/* Remplacer text-blue-* par les couleurs de palette */
.text-blue-500 { color: var(--color-primary) !important; }
.text-blue-600 { color: var(--color-primary) !important; }
.text-blue-700 { color: var(--color-primary-dark) !important; }
.text-blue-800 { color: var(--color-primary-dark) !important; }
.text-blue-900 { color: var(--color-primary-dark) !important; }

/* Remplacer border-blue-* par les couleurs de palette */
.border-blue-200 { border-color: var(--color-primary-light) !important; }
.border-blue-500 { border-color: var(--color-primary) !important; }
.border-blue-600 { border-color: var(--color-primary) !important; }

/* Remplacer focus:ring-blue-* */
.focus\:ring-blue-500:focus { 
    --tw-ring-color: var(--color-primary) !important;
}

/* Hover states pour bg-blue */
.hover\:bg-blue-700:hover { background-color: var(--color-primary-hover) !important; }
.hover\:bg-blue-600:hover { background-color: var(--color-primary-hover) !important; }

/* Text hover */
.hover\:text-blue-800:hover { color: var(--color-primary-dark) !important; }
.hover\:text-blue-700:hover { color: var(--color-primary-dark) !important; }

/* Purple/Secondary colors */
.bg-purple-50 { background-color: var(--color-accent-light) !important; }
.bg-purple-600 { background-color: var(--color-accent) !important; }
.text-purple-600 { color: var(--color-accent) !important; }

/* Gradients avec palettes */
.from-blue-600 { --tw-gradient-from: var(--color-primary) !important; }
.to-purple-600 { --tw-gradient-to: var(--color-accent) !important; }
.from-blue-700 { --tw-gradient-from: var(--color-primary-hover) !important; }
.to-purple-700 { --tw-gradient-to: var(--color-accent-hover) !important; }