/* ==========================================================================
   🎨 FAMILY COLORS - LeClainche Family Site 
   Palette officielle de couleurs douces inspirées du loader familial
   ========================================================================== */

:root {
    /* 🌟 Couleurs Familiales Officielles */
    --family-blue:   #A8C6F0;   /* Bleu doux - Thierry */
    --family-yellow: #FCE8A5;   /* Jaune doux - Commun */
    --family-green:  #AEE2B3;   /* Vert doux - Malo */
    --family-red:    #F4B8B5;   /* Rose doux - Julie */
    
    /* 🎭 Variations de teintes pour UI */
    --family-blue-light:   #D4E4F7;
    --family-blue-dark:    #7AA8E8;
    --family-yellow-light: #FEF3D2;
    --family-yellow-dark:  #F9DD78;
    --family-green-light:  #D7F0DB;
    --family-green-dark:   #86D48C;
    --family-red-light:    #F9DDDC;
    --family-red-dark:     #ED9690;
    
    /* 🌈 Dégradés prédéfinis */
    --gradient-primary: linear-gradient(135deg, var(--family-blue), var(--family-green));
    --gradient-warm: linear-gradient(135deg, var(--family-yellow), var(--family-red));
    --gradient-cool: linear-gradient(135deg, var(--family-blue), var(--family-green));
    --gradient-sunset: linear-gradient(135deg, var(--family-red), var(--family-yellow));
    
    /* 🎯 Couleurs UI système */
    --primary: var(--family-blue);
    --secondary: var(--family-green);
    --accent: var(--family-yellow);
    --warning: var(--family-red);
    --success: var(--family-green);
    --info: var(--family-blue);
    
    /* 📱 Couleurs neutres complémentaires */
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --black: #000000;
}

/* ==========================================================================
   🛠️ CLASSES UTILITAIRES - Background Colors
   ========================================================================== */

.bg-family-blue { background-color: var(--family-blue) !important; }
.bg-family-yellow { background-color: var(--family-yellow) !important; }
.bg-family-green { background-color: var(--family-green) !important; }
.bg-family-red { background-color: var(--family-red) !important; }

.bg-family-blue-light { background-color: var(--family-blue-light) !important; }
.bg-family-yellow-light { background-color: var(--family-yellow-light) !important; }
.bg-family-green-light { background-color: var(--family-green-light) !important; }
.bg-family-red-light { background-color: var(--family-red-light) !important; }

.bg-family-blue-dark { background-color: var(--family-blue-dark) !important; }
.bg-family-yellow-dark { background-color: var(--family-yellow-dark) !important; }
.bg-family-green-dark { background-color: var(--family-green-dark) !important; }
.bg-family-red-dark { background-color: var(--family-red-dark) !important; }

/* ==========================================================================
   🎨 CLASSES UTILITAIRES - Text Colors
   ========================================================================== */

.text-family-blue { color: var(--family-blue-dark) !important; }
.text-family-yellow { color: var(--family-yellow-dark) !important; }
.text-family-green { color: var(--family-green-dark) !important; }
.text-family-red { color: var(--family-red-dark) !important; }

/* ==========================================================================
   🌈 CLASSES UTILITAIRES - Gradient Backgrounds
   ========================================================================== */

.bg-gradient-primary { background: var(--gradient-primary) !important; }
.bg-gradient-warm { background: var(--gradient-warm) !important; }
.bg-gradient-cool { background: var(--gradient-cool) !important; }
.bg-gradient-sunset { background: var(--gradient-sunset) !important; }

/* ==========================================================================
   🔲 CLASSES UTILITAIRES - Border Colors
   ========================================================================== */

.border-family-blue { border-color: var(--family-blue) !important; }
.border-family-yellow { border-color: var(--family-yellow) !important; }
.border-family-green { border-color: var(--family-green) !important; }
.border-family-red { border-color: var(--family-red) !important; }

/* ==========================================================================
   🌟 CLASSES UTILITAIRES - Hover Effects
   ========================================================================== */

.hover-family-blue:hover { background-color: var(--family-blue-light) !important; }
.hover-family-yellow:hover { background-color: var(--family-yellow-light) !important; }
.hover-family-green:hover { background-color: var(--family-green-light) !important; }
.hover-family-red:hover { background-color: var(--family-red-light) !important; }

/* ==========================================================================
   🎯 CLASSES DE COMPOSANTS PRÉDÉFINIS
   ========================================================================== */

.family-card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
}

.family-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.family-button {
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.family-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(168, 198, 240, 0.4);
}

.family-input {
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: border-color 0.3s ease;
}

.family-input:focus {
    outline: none;
    border-color: var(--family-blue);
    box-shadow: 0 0 0 3px rgba(168, 198, 240, 0.2);
}

/* ==========================================================================
   📚 DOCUMENTATION ET EXEMPLES D'USAGE
   ========================================================================== */

/*
EXEMPLES D'UTILISATION :

HTML/Blazor :
<div class="bg-family-blue text-white p-4 rounded">Contenu bleu</div>
<button class="family-button">Bouton standard</button>
<div class="family-card p-6">Carte avec ombre</div>

CSS Custom :
.mon-composant {
    background: var(--family-green);
    border: 2px solid var(--family-green-dark);
    color: var(--gray-800);
}

.mon-gradient {
    background: var(--gradient-sunset);
}

Dégradés personnalisés :
background: linear-gradient(45deg, var(--family-blue), var(--family-yellow));
*/