/* ---------------------------- */
/* ----- COLORS VARIABLES ----- */
/* ---------------------------- */

:root {
    --white: white;
    --black: black;

    --gray-light: gray;
    --gray: #464a4d;

    /* LIGHT */
    --lightest: #eee;
    --lighter-more: #ddd ;
    --lighter-plus: #bebebe ;
    --lighter: #aaa ;
    --light: #8f8f8f;

    --light-alpha: #FFFFFF80;
    --light-trans: #FFFFFF40;

    /* DARK */
    --dark: #303030;
    --darker: #151010;
    --darkest: #101010;

    --dark-alpha: #00000080;
    --dark-trans: #00000040;

    /* RED PRIMARY */
    --primary-lightest: #ffd1d4;
    --primary-lighter: #ff8084;
    --primary-light: #ff4147;

    --primary: #EA2027;

    --primary-dark: #b6252f;
    --primary-darker: #9b1921;
    --primary-darker-more: rgb(100,0,0);
    --primary-darkest: rgb(40,0,0);

    --primary-alpha: #EA202780;
    --primary-trans: #EA202740;

    /* BLUE SECONDARY */
    --secondary-light: #3399ff;

    --secondary: #0080ff;

    --secondary-dark: #0066cc;

    --secondary-pastel-light: #464a4d;
    --secondary-pastel-dark: #343a40;
    --secondary-pastel-darker: #28323C;
    --secondary-pastel-darkest: #1E242A;

    /* YELLOW ACCENT */
    --accent-lightest: #fcf8e3;
    --accent-lighter: #ffcc66;
    --accent-light: #ffaa40;

    --accent: #ff7f00;

    --accent-dark: #cc6600;

    --accent-alpha: #ff7f0080;
    --accent-trans: #ff7f0040;

    /* VARIOUS OTHER COLORS */
    --purple: purple;
    --green: rgb(0,100,0);
    --fuschia: #FF1493;
    --fuschia-light: #FF54C3;
    --flash-red: #f66;
    --flash-green: #0f0;
    --flash-blue: #4Cf;

    --AIR: #7aa9ff;
    --EAU: #44bdc4;
    --FEU: rgb(255, 157, 76);
    --TERRE: #9e816a;
    --VIDE: #b293ff;
}

/* -------------------------- */
/* ----- COLORS CLASS ----- */
/* -------------------------- */

/* WHITE, BLACK, GRAY */

.text-white { color: var(--white); }
.bg-white { background-color: var(--white); }

.text-black { color: var(--black); }
.bg-black { background-color: var(--black); }

.text-gray { color: var(--gray) !important }
.bg-gray { background-color: var(--gray); }

/* LIGHT */

.text-lightest { color: var(--lightest); }
.bg-lightest { background-color: var(--lightest); }

.text-light { color: var(--light); }
.bg-light { background-color: var(--light);}

.text-light-alpha { color: var(--light-alpha); }
a.text-light-alpha:hover { color: var(--white); }
.bg-light-alpha { background-color: var(--light-alpha) }

.text-light-trans { color: var(--light-trans); }
.bg-light-trans { background-color: var(--light-trans) }

/* PRIMARY */

.text-primary-light { color: var(--primary-light);}

.text-primary { color: var(--primary) !important;}
.bg-primary { background-color: var(--primary) !important;}
a.text-primary:hover { color: var(--primary-light); }

.text-primary-dark { color: var(--primary-dark) ; }
.bg-primary-dark { background-color: var(--primary-dark) ; }

.text-primary-darker { color: var(--primary-darker) ; }
.bg-primary-darker { background-color: var(--primary-darker); }

.text-primary-darker-more { color: var(--primary-darker-more); }
.bg-primary-darker-more { background-color: var(--primary-darker-more); }

.text-primary-darkest { color: var(--primary-darkest); }
.bg-primary-darkest { background-color: var(--primary-darkest); }


/* SECONDARY */

.text-secondary { color: var(--secondary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
a.text-secondary:hover { color: var(--secondary-light); }

/* ACCENT */

.text-accent-light { color: var(--accent-light); }
.bg-accent-light { background-color: var(--accent-light); }

.text-accent { color: var(--accent); }
.bg-accent { background-color: var(--accent); }

.text-accent-alpha { color:var(--accent-alpha); }
.bg-accent-alpha { background-color:var(--accent-alpha); }

/* OTHERS */

.text-AIR { color: var(--AIR); }
.bg-AIR { background-color: var(--AIR); }

.text-EAU { color: var(--EAU); }
.bg-EAU { background-color: var(--EAU); }

.text-FEU { color: var(--FEU); }
.bg-FEU { background-color: var(--FEU); }

.text-TERRE { color: var(--TERRE); }
.bg-TERRE { background-color: var(--TERRE); }

.text-VIDE { color: var(--VIDE); }
.bg-VIDE { background-color: var(--VIDE); }

.text-green { color: var(--green); }
.bg-green { background-color: var(--green); }

.text-flash-green { color:var(--flash-green); }
.bg-flash-green { background-color: var(--flash-green); }

.text-fuschia { color:var(--fuschia); }
.bg-fuschia { background-color: var(--fuschia); }
a.text-fuschia:hover { color:var(--fuschia-light; }