/* ==========================================================
   COLORS.CSS - Charte graphique 1 Vie, 2 Chiens
   CSS Variables and Color Palette
   ========================================================== */

:root {
    /* Brand Colors */
    --primary-color: #e60693;       /* Rose (header, elements principaux) */
    --secondary-color: #04e8e2;     /* Cyan (accents, hover) */
    /* Text */
    --text-black: #1f2933;          /* Noir fonce (textes) */
    --white: #FFFFFF;               /* Blanc pur */
    --grey-light: #949699;          /* Gris clair (textes secondaires) */
    --grey-medium: #6C757D;         /* Gris moyen (descriptions, meta) */
    --grey-inactive: #CED4DA;       /* Eléments inactifs (toggles off) */

    /* Backgrounds */
    --light-bg: #F5F5F5;            /* Fond clair général */
    --surface-color: #F8F9FA;       /* Fond de surface (cartes, modals) */
    --dark-color: #212C21;          /* Fond sombre */

    /* Borders */
    --border-color: #DEE2E6;        /* Bordure standard */

    /* Semantic */
    --success-color: #28A745;       /* Vert succès */
    --danger-color: #dc3545;        /* Rouge erreur */

    /* Shadows & Overlays */
    --shadow-sm: rgba(0, 0, 0, 0.15);        /* Ombre légère */
    --shadow-md: rgba(0, 0, 0, 0.3);         /* Ombre medium */
    --overlay-bg: rgba(31, 41, 51, 0.7);     /* Fond overlay modal */
    --primary-shadow: rgba(230, 6, 147, 0.2); /* Ombre couleur primaire */

    /* Promo Popup */
    --promo-popup-bg: #04e8e2;

    /* Properties */
    --border-radius: 8px;           /* Arrondi standard */
    --transition: all 0.3s ease;    /* Transition standard */
}