:root {

    /**
     * Les couleurs primaires devraient être utilisées pour les éléments interactifs, les états et les éléments les plus importants sur la page
     */
    --act--primary--50: rgb(255, 255, 255);
    --act--primary--100: rgb(235, 254, 242);
    --act--primary--200: rgb(215, 253, 230);
    --act--primary--300: rgb(176, 252, 204);
    --act--primary--400: rgb(136, 250, 179);
    --act--primary--500: rgb(97, 249, 153);
    --act--primary--600: rgb(79, 240, 138);
    --act--primary--700: rgb(46, 198, 102);
    --act--primary--800: rgb(34, 148, 77);
    --act--primary--900: rgb(23, 99, 51);
    --act--primary--950: rgb(0, 0, 0);

    /**
    Brownsburg
    */
    --act--primary--50: rgb(230, 249, 246);
    --act--primary--100: rgb(205, 242, 237);
    --act--primary--200: rgb(155, 229, 219);
    --act--primary--300: rgb(106, 216, 202);
    --act--primary--400: rgb(56, 203, 184);
    --act--primary--500: rgb(6, 190, 166);
    --act--primary--600: rgb(5, 152, 133);
    --act--primary--700: rgb(4, 114, 100);
    --act--primary--800: rgb(2, 76, 66);
    --act--primary--900: rgb(1, 38, 33);
    --act--primary--950: rgb(0, 14, 12);

    /**
     * Les couleurs secondaires devraient être utilisées pour les éléments informatifs ou alternatifs
     */
    --act--secondary--50: rgb(234, 253, 251);
    --act--secondary--100: rgb(206, 247, 243);
    --act--secondary--200: rgb(157, 240, 231);
    --act--secondary--300: rgb(107, 232, 220);
    --act--secondary--400: rgb(69, 218, 203);
    --act--secondary--500: rgb(9, 217, 196);
    --act--secondary--600: rgb(7, 174, 157);
    --act--secondary--700: rgb(5, 130, 118);
    --act--secondary--800: rgb(4, 87, 78);
    --act--secondary--900: rgb(2, 43, 39);
    --act--secondary--950: rgb(0, 0, 0);

    /**
    Brownsburg
    */
    --act--secondary--50: rgb(232, 234, 238);
    --act--secondary--100: rgb(209, 213, 221);
    --act--secondary--200: rgb(163, 171, 188);
    --act--secondary--300: rgb(118, 128, 154);
    --act--secondary--400: rgb(72, 86, 121);
    --act--secondary--500: rgb(26, 44, 87);
    --act--secondary--600: rgb(21, 35, 70);
    --act--secondary--700: rgb(16, 26, 52);
    --act--secondary--800: rgb(10, 18, 35);
    --act--secondary--900: rgb(5, 9, 17);
    --act--secondary--950: rgb(1, 3, 5);

    /**
     * Les couleurs dégradées neutre devraient être utilisées pour le reste
     */
    --act--neutral--50: rgb(248, 248, 248);
    --act--neutral--100: rgb(236, 236, 236);
    --act--neutral--200: rgb(210, 210, 210);
    --act--neutral--300: rgb(143, 143, 143);
    --act--neutral--400: rgb(105, 105, 105);
    --act--neutral--500: rgb(68, 68, 68);
    --act--neutral--600: rgb(54, 54, 54);
    --act--neutral--700: rgb(41, 41, 41);
    --act--neutral--800: rgb(27, 27, 27);
    --act--neutral--900: rgb(14, 14, 14);
    --act--neutral--950: rgb(0, 0, 0);

    --act--rounded--button: 0.5rem;
    --act--rounded--box: 0.5rem;
    --act--rounded--icon: 0.5rem;
    --act--rounded--control: 0.5rem;
    --act--rounded--pill: 0.5rem;

    --act--space--0: 0;
    --act--space--2: 0.125rem;
    --act--space--4: 0.25rem;
    --act--space--8: 0.5rem;
    --act--space--16: 1rem;
    --act--space--24: 1.5rem;
    --act--space--32: 2rem;
    --act--space--48: 3rem;
    --act--space--64: 4rem;
    --act--space--80: 5rem;
    --act--space--96: 6rem;
    --act--space--128: 8rem;
    --act--space--160: 10rem;
    --act--space--192: 12rem;
}

.text-inherit {color:inherit!important}

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-2 { margin-left: var(--act--space--2); margin-right: var(--act--space--2); }
.mx-4 { margin-left: var(--act--space--4); margin-right: var(--act--space--4); }
.mx-8 { margin-left: var(--act--space--8); margin-right: var(--act--space--8); }
.mx-16 { margin-left: var(--act--space--16); margin-right: var(--act--space--16); }
.mx-24 { margin-left: var(--act--space--24); margin-right: var(--act--space--24); }
.mx-32 { margin-left: var(--act--space--32); margin-right: var(--act--space--32); }
.mx-48 { margin-left: var(--act--space--48); margin-right: var(--act--space--48); }
.mx-64 { margin-left: var(--act--space--64); margin-right: var(--act--space--64); }
.mx-80 { margin-left: var(--act--space--80); margin-right: var(--act--space--80); }
.mx-96 { margin-left: var(--act--space--96); margin-right: var(--act--space--96); }
.mx-128 { margin-left: var(--act--space--128); margin-right: var(--act--space--128); }
.mx-160 { margin-left: var(--act--space--160); margin-right: var(--act--space--160); }
.mx-192 { margin-left: var(--act--space--192); margin-right: var(--act--space--192); }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-2 { margin-top: var(--act--space--2); margin-bottom: var(--act--space--2); }
.my-4 { margin-top: var(--act--space--4); margin-bottom: var(--act--space--4); }
.my-8 { margin-top: var(--act--space--8); margin-bottom: var(--act--space--8); }
.my-16 { margin-top: var(--act--space--16); margin-bottom: var(--act--space--16); }
.my-24 { margin-top: var(--act--space--24); margin-bottom: var(--act--space--24); }
.my-32 { margin-top: var(--act--space--32); margin-bottom: var(--act--space--32); }
.my-48 { margin-top: var(--act--space--48); margin-bottom: var(--act--space--48); }
.my-64 { margin-top: var(--act--space--64); margin-bottom: var(--act--space--64); }
.my-80 { margin-top: var(--act--space--80); margin-bottom: var(--act--space--80); }
.my-96 { margin-top: var(--act--space--96); margin-bottom: var(--act--space--96); }
.my-128 { margin-top: var(--act--space--128); margin-bottom: var(--act--space--128); }
.my-160 { margin-top: var(--act--space--160); margin-bottom: var(--act--space--160); }
.my-192 { margin-top: var(--act--space--192); margin-bottom: var(--act--space--192); }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--act--space--2); }
.mt-4 { margin-top: var(--act--space--4); }
.mt-8 { margin-top: var(--act--space--8); }
.mt-16 { margin-top: var(--act--space--16); }
.mt-24 { margin-top: var(--act--space--24); }
.mt-32 { margin-top: var(--act--space--32); }
.mt-48 { margin-top: var(--act--space--48); }
.mt-64 { margin-top: var(--act--space--64); }
.mt-80 { margin-top: var(--act--space--80); }
.mt-96 { margin-top: var(--act--space--96); }
.mt-128 { margin-top: var(--act--space--128); }
.mt-160 { margin-top: var(--act--space--160); }
.mt-192 { margin-top: var(--act--space--192); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--act--space--2); }
.mb-4 { margin-bottom: var(--act--space--4); }
.mb-8 { margin-bottom: var(--act--space--8); }
.mb-16 { margin-bottom: var(--act--space--16); }
.mb-24 { margin-bottom: var(--act--space--24); }
.mb-32 { margin-bottom: var(--act--space--32); }
.mb-48 { margin-bottom: var(--act--space--48); }
.mb-64 { margin-bottom: var(--act--space--64); }
.mb-80 { margin-bottom: var(--act--space--80); }
.mb-96 { margin-bottom: var(--act--space--96); }
.mb-128 { margin-bottom: var(--act--space--128); }
.mb-160 { margin-bottom: var(--act--space--160); }
.mb-192 { margin-bottom: var(--act--space--192); }

.mr-0 { margin-right: 0; }
.mr-2 { margin-right: var(--act--space--2); }
.mr-4 { margin-right: var(--act--space--4); }
.mr-8 { margin-right: var(--act--space--8); }
.mr-16 { margin-right: var(--act--space--16); }
.mr-24 { margin-right: var(--act--space--24); }
.mr-32 { margin-right: var(--act--space--32); }
.mr-48 { margin-right: var(--act--space--48); }
.mr-64 { margin-right: var(--act--space--64); }
.mr-80 { margin-right: var(--act--space--80); }
.mr-96 { margin-right: var(--act--space--96); }
.mr-128 { margin-right: var(--act--space--128); }
.mr-160 { margin-right: var(--act--space--160); }
.mr-192 { margin-right: var(--act--space--192); }

.ml-0 { margin-left: 0; }
.ml-2 { margin-left: var(--act--space--2); }
.ml-4 { margin-left: var(--act--space--4); }
.ml-8 { margin-left: var(--act--space--8); }
.ml-16 { margin-left: var(--act--space--16); }
.ml-24 { margin-left: var(--act--space--24); }
.ml-32 { margin-left: var(--act--space--32); }
.ml-48 { margin-left: var(--act--space--48); }
.ml-64 { margin-left: var(--act--space--64); }
.ml-80 { margin-left: var(--act--space--80); }
.ml-96 { margin-left: var(--act--space--96); }
.ml-128 { margin-left: var(--act--space--128); }
.ml-160 { margin-left: var(--act--space--160); }
.ml-192 { margin-left: var(--act--space--192); }