/*ici nous initialisons des variables de couleurs a appeler dans vos autres fichiers CSS. cela permettera de ne pas avoir a maintenir un code surchargé de couleurs defini en dur, et de pouvoir tester des jeux de couleurs rapidement */

:root{

    --purple: #6768ac;
    --yellow: #ecc371;
    --paleblue: #85a2ab;
    --red: #ea435e;
    --green: #47986b;

    /*BRANDING 2024*/

    /* CSS HSL */
    --dark-green: hsla(185, 58%, 16%, 1);
    --yellow: hsla(37, 100%, 56%, 1);
    --sea-green: hsla(178, 58%, 43%, 1);
    --lion: hsla(35, 41%, 56%, 1);
    --ecru: hsla(37, 53%, 69%, 1);
    --cream: hsla(37, 51%, 92%, 1);

    /*GRADIENT FOR BANNER*/
    --dark-green-gradient: radial-gradient(circle, rgba(17,59,64,1) 42%, rgba(11,43,45,1) 100%);



/*ceci est un exemple : vous pouvez mettre en "variable" des liens url*/
    --url: url("https://picsum.photos/1024/720");
/*ceci est un exemple : vous pouvez creer des "variables" de taille*/
    --size-3: 3rem;
/*ceci est un exemple : vous pouvez imbriquer des var*/
    --size-title: var(--size-3);
    --size-marg: var(--size-3);


/*pour cette page unique, je vous propose de ne mettre en place un set de couleur moins complexe*/

/* CLR pour couleur + -nom*/
--clr-primary:var(--sea-green);
--clr-secondary:var(--yellow);

--clr-lighter:var(--cream);
--clr-light:var(--ecru);
--clr-neutral:var(--lion);
--clr-dark: var(--dark-green);

--clr-white:rgba(255,255,255,0.9);
--clr-black:rgba(0,0,0,0.9);

--bg-dark: var(--dark-green-gradient);

/*ceci est un exemple : vous pouvez mettre en "variable" des liens url*/
--url: url(../img/backgrounds/Firefly\ 3d\ hexagons\ floating3.jpg);
/*ceci est un exemple : vous pouvez creer des "variables" de taille*/
--size-3: 3rem;
/*ceci est un exemple : vous pouvez imbriquer des var*/
--size-title: var(--size-3);
--size-marg: var(--size-3);
}