:root {
    --pure-black: hsl(0, 0%, 0%);
    --black: hsl(0, 0%, 3%);
    --white: hsl(0, 0%, 95%);
    --pure-white: hsl(0, 0%, 100%);

    --lighter-light: 1.2;
    --light-light: 1.1;
    --normal-light: 1;
    --dark-light: 0.9;
    --darker-light: 0.8;

    --opaque: 1;
    --semi-transparent: 0.8;
    --transparent: 0.5;
    --light-transparent: 0.3;
    --very-light-transparent: 0.1;

    --main-color-1: hsl(0, 75%, 45%);
    --main-color-2: hsl(120, 75%, 45%);
    --main-color-3: hsl(240, 75%, 45%);

    --error: hsl(0, 75%, 45%);
    --success: hsl(120, 75%, 45%);
    
    --cubic: cubic-bezier(0.075, 0.82, 0.165, 1);
    --short-transition: 0.2s;
    --medium-transition: 0.4s;
    --long-transition: 0.7s;
}

/* BASE */

.main-color-1 {color: var(--main-color-1);}
.main-color-2 {color: var(--main-color-2);}
.main-color-3 {color: var(--main-color-3);}

.main-bg-1 {background-color: var(--main-color-1);}
.main-bg-2 {background-color: var(--main-color-2);}
.main-bg-3 {background-color: var(--main-color-3);}

.main-border-1 {border-color: var(--main-color-1);}
.main-border-2 {border-color: var(--main-color-2);}
.main-border-3 {border-color: var(--main-color-3);}

.main-color-1-bg {color: var(--main-color-1); background-color: var(--main-color-1);}
.main-color-2-bg {color: var(--main-color-2); background-color: var(--main-color-2);}
.main-color-3-bg {color: var(--main-color-3); background-color: var(--main-color-3);}

/* LIGHT */

.main-color-1-lighter {color: var(--main-color-1); filter: brightness(var(--lighter-light));}
.main-color-2-lighter {color: var(--main-color-2); filter: brightness(var(--lighter-light));}
.main-color-3-lighter {color: var(--main-color-3); filter: brightness(var(--lighter-light));}
.main-color-1-light {color: var(--main-color-1); filter: brightness(var(--light-light));}
.main-color-2-light {color: var(--main-color-2); filter: brightness(var(--light-light));}
.main-color-3-light {color: var(--main-color-3); filter: brightness(var(--light-light));}
.main-color-1-dark {color: var(--main-color-1); filter: brightness(var(--dark-light));}
.main-color-2-dark {color: var(--main-color-2); filter: brightness(var(--dark-light));}
.main-color-3-dark {color: var(--main-color-3); filter: brightness(var(--dark-light));}
.main-color-1-darker {color: var(--main-color-1); filter: brightness(var(--darker-light));}
.main-color-2-darker {color: var(--main-color-2); filter: brightness(var(--darker-light));}
.main-color-3-darker {color: var(--main-color-3); filter: brightness(var(--darker-light));}

.main-bg-1-lighter {background-color: var(--main-color-1);}
.main-bg-2-lighter {background-color: var(--main-color-2);}
.main-bg-3-lighter {background-color: var(--main-color-3);}
.main-bg-1-light {background-color: var(--main-color-1);}
.main-bg-2-light {background-color: var(--main-color-2);}
.main-bg-3-light {background-color: var(--main-color-3);}
.main-bg-1-dark {background-color: var(--main-color-1);}
.main-bg-2-dark {background-color: var(--main-color-2);}
.main-bg-3-dark {background-color: var(--main-color-3);}
.main-bg-1-darker {background-color: var(--main-color-1);}
.main-bg-2-darker {background-color: var(--main-color-2);}
.main-bg-3-darker {background-color: var(--main-color-3);}

.main-border-1-lighter {border-color: var(--main-color-1);}
.main-border-2-lighter {border-color: var(--main-color-2);}
.main-border-3-lighter {border-color: var(--main-color-3);}
.main-border-1-light {border-color: var(--main-color-1);}
.main-border-2-light {border-color: var(--main-color-2);}
.main-border-3-light {border-color: var(--main-color-3);}
.main-border-1-dark {border-color: var(--main-color-1);}
.main-border-2-dark {border-color: var(--main-color-2);}
.main-border-3-dark {border-color: var(--main-color-3);}
.main-border-1-darker {border-color: var(--main-color-1);}
.main-border-2-darker {border-color: var(--main-color-2);}
.main-border-3-darker {border-color: var(--main-color-3);}

.main-color-1-bg-lighter {color: var(--main-color-1); background-color: var(--main-color-1);}
.main-color-2-bg-lighter {color: var(--main-color-2); background-color: var(--main-color-2);}
.main-color-3-bg-lighter {color: var(--main-color-3); background-color: var(--main-color-3);}
.main-color-1-bg-light {color: var(--main-color-1); background-color: var(--main-color-1);}
.main-color-2-bg-light {color: var(--main-color-2); background-color: var(--main-color-2);}
.main-color-3-bg-light {color: var(--main-color-3); background-color: var(--main-color-3);}
.main-color-1-bg-dark {color: var(--main-color-1); background-color: var(--main-color-1);}
.main-color-2-bg-dark {color: var(--main-color-2); background-color: var(--main-color-2);}
.main-color-3-bg-dark {color: var(--main-color-3); background-color: var(--main-color-3);}
.main-color-1-bg-darker {color: var(--main-color-1); background-color: var(--main-color-1);}
.main-color-2-bg-darker {color: var(--main-color-2); background-color: var(--main-color-2);}
.main-color-3-bg-darker {color: var(--main-color-3); background-color: var(--main-color-3);}

/* TRANSPARENT */