/*--------------------------------------------------------------------*\
#VARIABLES
\*--------------------------------------------------------------------*/

:root {
    /* couleurs principales */
    --transparent: transparent;
    --Primary-color: #00999a;
    --Secondary-color: #000000;
    --Tertiary-color: #ffffff;
    --gray-Primary-color: #f7f7f7;
    --gray-Secondary-color: #f3f3f3;
    --gray-Tertiary-color: #777777;
    
    /* texte color */
    --text-primary-color: #000000;
    --text-secondary-color:#ffffff;
    --text-Tertiary-color: #333333;
    --text-Quaternary-color: #555555;

    /* line color */
    --line-Primary-color: #999999;
    --line-Secondary-color: #d6d6d6;

    /* Boutons etat10,etat12,etat40,etat60*/
    --background-gray: #e6e6e6;
    --background-hover-gray: #d8d8d8;

    /* panier */
    --backgroung-panier-color:#231f20;

    /* typo */
    --typography-primary-font-family: "Roboto";
    --typography-secondary-font-family: "roboto-condensed";
    --typography-primary-font-weight: 400;
    --typography-secondary-font-weight: 700;
}

/* exemple 

color: var(--transparent);

Primary 
Secondary 
Tertiary 
Quaternary 
Quinary 
*/