/* #region Colors */

:root {
    --black: #000;

    --white: #fff;
    --white-fade-90: hsla(0, 0%, 100%, 0.90);
    --white-fade-80: hsla(0, 0%, 100%, 0.80);
    --white-fade-70: hsla(0, 0%, 100%, 0.70);
    --white-fade-60: hsla(0, 0%, 100%, 0.60);
    --white-fade-50: hsla(0, 0%, 100%, 0.50);
    --white-fade-40: hsla(0, 0%, 100%, 0.40);
    --white-fade-30: hsla(0, 0%, 100%, 0.30);
    --white-fade-20: hsla(0, 0%, 100%, 0.20);
    --white-fade-10: hsla(0, 0%, 100%, 0.10);
    --white-fade-5: hsla(0, 0%, 100%, 0.05);
    --white-fade-0: hsla(0, 0%, 100%, 0.001);

    --plum: #371e2c;
    --plum-darken-1: hsl(336, 55%, 12%);
    --plum-lighten-1: #452835;
    --plum-lighten-2: hsl(334, 34%, 30%);
    --plum-lighten-3: hsl(334, 10%, 54%);
    --plum-fade-0: hsla(330, 14%, 3%, 0.001);
    --plum-fade-3: hsla(330, 14%, 3%, 0.03);
    --plum-fade-5: hsla(330, 14%, 3%, 0.05);
    --plum-fade-7: hsla(330, 14%, 3%, 0.07);
    --plum-fade-10: hsla(330, 14%, 3%, 0.10);
    --plum-fade-15: hsla(330, 14%, 3%, 0.15);
    --plum-fade-20: hsla(330, 14%, 3%, 0.20);
    --plum-fade-25: hsla(330, 14%, 3%, 0.25);
    --plum-fade-33: hsla(330, 14%, 3%, 0.33);
    --plum-fade-40: hsla(330, 14%, 3%, 0.40);
    --plum-fade-50: hsla(330, 14%, 3%, 0.50);
    --plum-fade-60: hsla(330, 14%, 3%, 0.60);

    --blue: hsl(211, 90%, 53%); /* #1984f3 */
    --blue-lighten-1: hsl(208, 100%, 59%);
    --blue-lighten-2: hsl(205, 90%, 75%);
    --blue-lighten-3: hsl(202, 80%, 85%);
    --blue-fade-50: hsla(211, 90%, 53%, 0.50);
    --blue-fade-40: hsla(211, 90%, 53%, 0.40);
    --blue-fade-30: hsla(211, 90%, 53%, 0.30);
    --blue-fade-20: hsla(211, 90%, 53%, 0.20);
    --blue-fade-10: hsla(211, 90%, 53%, 0.10);
    --blue-fade-5: hsla(211, 90%, 53%, 0.05);
    --blue-fade-0: hsla(211, 90%, 53%, 0.001);

    --smoke: #897e85;
    --smoke-lighten-1: #a499a0;
    --smoke-lighten-2: #ab9da6;
    --smoke-darken-1: #756a71;
    --mist: #c5c3ce;

    --smoke-fade-40: hsl(322, 5%, 44%, 0.40);
    --smoke-fade-50: hsl(322, 5%, 44%, 0.50);
    --smoke-fade-60: hsl(322, 5%, 44%, 0.60);
    --smoke-fade-70: hsl(322, 5%, 44%, 0.70);

    --lipgloss: #ef767a;
    --lipgloss-darken-1: hsl(358, 65%, 62%);

    --cloud: #f7f7fa;
    --cloud-darken-1: hsl(240, 30%, 95%);
    --cloud-lighten-1: hsl(240, 13%, 98%);

    --cloud-fade-0:  hsla(240, 23%, 97%, 0.01);
    --cloud-fade-70: hsla(240, 23%, 97%, 0.70);
    --cloud-fade-90: hsla(240, 23%, 97%, 0.90);
    --cloud-fade-93: hsla(240, 23%, 97%, 0.93);

    --edge: hsl(228, 37%, 92%);

    --edge-multiply: hsla(228, 60%, 40%, 0.10);

    --edge-multiply-lighten-1: hsla(228, 60%, 40%, 0.07);
    --edge-multiply-lighten-2: hsla(228, 50%, 42%, 0.06);
    --edge-multiply-lighten-3: hsla(228, 60%, 40%, 0.03);

    --edge-multiply-darken-1: hsla(228, 60%, 40%, 0.13);
    --edge-multiply-darken-2: hsla(228, 65%, 32%, 0.16);
    --edge-multiply-darken-3: hsla(228, 70%, 30%, 0.25);
    --edge-multiply-darken-4: hsla(228, 85%, 15%, 0.35);
    --edge-multiply-darken-5: hsla(228, 85%, 15%, 0.50);

    --edge-lighten-1: hsl(228, 32%, 93%);

    --edge-darken-1: hsl(228, 25%, 85%);
    --edge-darken-2: hsl(228, 25%, 80%);

    --edge-fade-0:  hsla(228, 37%, 92%, 0.00);
    --edge-fade-5:  hsla(228, 37%, 92%, 0.05);
    --edge-fade-15: hsla(228, 37%, 92%, 0.15);
    --edge-fade-20: hsla(228, 37%, 92%, 0.20);
    --edge-fade-25: hsla(228, 37%, 92%, 0.25);
    --edge-fade-33: hsla(228, 37%, 92%, 0.33);
    --edge-fade-40: hsla(228, 37%, 92%, 0.40);
    --edge-fade-50: hsla(228, 37%, 92%, 0.50);
    --edge-fade-66: hsla(228, 37%, 92%, 0.66);
    --edge-fade-90: hsla(228, 37%, 92%, 0.90);

    --chartreuse: #d3e053;

    --green: #67bf1f;

    --orange: #ff9633;

    --yellow: #eee21e;

    --red: #eb514c;
}

/* #endregion */


/* #region Backgrounds and borders */

.backgroundborder--lipgloss {
    background-color: var(--lipgloss);
    border-color: var(--lipgloss);
}

.backgroundborder--plum {
    background-color: var(--plum);
    border-color: var(--plum);
}

.backgroundborder--plumdarken1 {
    background-color: var(--plum-darken-1);
    border-color: var(--plum-darken-1);
}

.backgroundborder--plumlighten1 {
    background-color: var(--plum-lighten-1);
    border-color: var(--plum-lighten-1);
}

.button.backgroundborder--plum {
    &:hover {
        background-color: var(--plum-lighten-2);
        border-color: var(--plum-lighten-2);
    }
    &:active, &:focus {
        background-color: var(--plum-lighten-2);
        border-color: var(--plum-lighten-2);
    }
}

.backgroundborder--cloud {
    background-color: var(--cloud);
    border-color: var(--cloud);
}

.backgroundborder--cloudedge {
    background-color: var(--cloud);
    border-color: var(--edge-lighten-1);
}

.backgroundborder--cloudedgedarken {
    background-color: var(--edge-multiply-lighten-3);
    border-color: var(--edge-multiply);
}

.backgroundborder--edgedarken {
    background-color: var(--edge-multiply-darken-3);
    border-color: transparent;
}

.backgroundborder--whiteedge {
    background-color: var(--white);
    border-color: var(--edge);
}

.backgroundborder--whitesmokeedge {
    background-color: var(--white);
    border-color: var(--smoke);
}

.backgroundborder--white {
    background-color: var(--white);
    border-color: var(--white);
}

.button.backgroundborder--whiteedge {
    &:hover {
        background-color: var(--cloud);
        border-color: var(--edge);
    }
    &:active, &:focus {
        background-color: var(--cloud-darken-1);
        border-color: var(--edge-darken-1);
    }
    &.color--plum:hover {
        color: var(--plum);
    }
    &.color--plum:active, &.color--plum:focus {
        color: var(--smoke-darken-1);
    }
}

.backgroundborder--whiteedgedarken {
    background-color: var(--white);
    border-color: var(--edge-darken-1);
}

.backgroundborder--transparentwhitefade30 {
    background-color: transparent;
    border-color: var(--white-fade-30);
}

.button.backgroundborder--transparentwhitefade30 {
    &:hover {
        background-color: var(--white-fade-10);
        border-color: var(--white-fade-40);
    }
    &:active, &:focus {
        background-color: var(--white-fade-10);
        border-color: var(--white-fade-40);
    }
}

.backgroundborder--transparentwhiteglass {
    background-color: var(--white-fade-10);
    border-color: var(--white-fade-20);
}

.button.backgroundborder--transparentwhiteglass {
    &:hover {
        background-color: var(--white-fade-20);
        border-color: var(--white-fade-30);
    }
    &:active, &:focus {
        background-color: var(--white-fade-20);
        border-color: var(--white-fade-30);
    }
}

.backgroundborder--edge {
    background-color: var(--edge);
    border-color: var(--edge);
}

.backgroundborder--blue {
    background-color: var(--blue);
    border-color: var(--blue);
}

.backgroundborder--blue-fade-20 {
    background-color: var(--blue-fade-20);
    border-color: var(--blue-fade-20);
}

.backgroundborder--blue-fade-10 {
    background-color: var(--blue-fade-10);
    border-color: var(--blue-fade-10);
}

.backgroundborder--blue-gradient-bottom-right {
    background:
        linear-gradient(
            to bottom,
            var(--blue-fade-0) 0%,
            var(--blue-fade-0) 50%,
            var(--blue-fade-5) 100%
        ),
        linear-gradient(
            to right,
            var(--blue-fade-0) 0%,
            var(--blue-fade-0) 50%,
            var(--blue-fade-5) 100%
        );
    border-color: var(--blue-fade-10);
}

.backgroundborder--blue-gradient-bottom {
    background: linear-gradient(
        to bottom,
        var(--blue-fade-0) 60%,
        var(--blue-fade-50) 100%
    );
    border-color: var(--blue-fade-50);
}

.backgroundborder--smoke-gradient-bottom {
    background: linear-gradient(
        to bottom,
        transparent 60%,
        var(--smoke-fade-50) 100%
    );
    border-color: var(--smoke-fade-50);
}

.backgroundborder--blue-gradient-right-30-to-0 {
    background: linear-gradient(
        to right,
        var(--blue-fade-40) 10%,
        var(--blue-fade-0) 85%
    );
    border-color: var(--blue-fade-40);
}

.backgroundborder--plum-gradient-bottom-40-to-60 {
    background: linear-gradient(
        to bottom,
        var(--plum-fade-33) 0%,
        var(--plum-fade-60) 80%
    );
    border-color: var(--plum-fade-60);
}

.backgroundborder--cloud-gradient-bottom-right-50 {
    background:
        linear-gradient(
            to right,
            transparent 50%,
            hsla(240, 23%, 97%, 0.50) 100%
        ),
        linear-gradient(
            to bottom,
            transparent 50%,
            hsla(240, 23%, 97%, 0.50) 100%
        );
    border-color: transparent;
}

.backgroundborder--blue {
    background-color: var(--blue);
    border-color: var(--blue);
}

.button.backgroundborder--blue {
    &:hover {
        background-color: var(--blue-lighten-1);
        border-color: var(--blue-lighten-1);
    }
    &:active, &:focus {
        background-color: var(--blue-lighten-2);
        border-color: var(--blue-lighten-2);
    }
    &.color--white:hover {
        color: var(--white-fade-90);
    }
    &.color--white:active, &.color--white:focus {
        color: var(--white-fade-50);
    }
}


.backgroundborder--green {
    background-color: var(--green);
    border-color: var(--green);
}

.backgroundborder--chartreuse {
    background-color: var(--chartreuse);
    border-color: var(--chartreuse);
}

.backgroundborder--orange {
    background-color: var(--orange);
    border-color: var(--orange);
}

.backgroundborder--yellow {
    background-color: var(--yellow);
    border-color: var(--yellow);
}

.backgroundborder--red {
    background-color: var(--red);
    border-color: var(--red);
}

.backgroundborder--smoke {
    background-color: var(--smoke);
    border-color: var(--smoke);
}

.backgroundborder--mist {
    background-color: var(--mist);
    border-color: var(--mist);
}

/* #endregion */

/* #region Text and icon colors */

.color--blue, .color--blue:hover, .color--blue:active, .color--blue:focus {
    color: var(--blue);
}

.color--red {
    color: var(--red);
}

.color--orange {
    color: var(--orange);
}

.color--yellow {
    color: var(--yellow);
}

.color--green {
    color: var(--green);
}

.color--smoke {
    color: var(--smoke);
}

.color--smoke-fade-50 {
    color: var(--smoke-fade-50);
}

.color--lipgloss {
    color: var(--lipgloss);
}
.color--plum {
    color: var(--plum);
}

.color--plum-lighten-3 {
    color: var(--plum-lighten-3);
}

.color--white {
    color: var(--white);
}

.color--white-fade-50 {
    color: var(--white-fade-50);
}

.color--white-fade-60 {
    color: var(--white-fade-60);
}

.color--white-fade-70 {
    color: var(--white-fade-70);
}

.color--edge-multiply-darken-4 {
    color: var(--edge-multiply-darken-4);
}

.backgroundborder--lipgloss {
    background-color: var(--lipgloss);
    border-color: var(--lipgloss);
}

.backgroundborder--cloudedge {
    background-color: var(--cloud);
    border-color: var(--edge-lighten-1);
}

.backgroundborder--cloudedgedarken {
    background-color: var(--edge-multiply-lighten-3);
    border-color: var(--edge-multiply);
}

.backgroundborder--edgedarken {
    background-color: var(--edge-multiply-darken-3);
    border-color: transparent;
}

.backgroundborder--whiteedge {
    background-color: var(--white);
    border-color: var(--edge);
}

.backgroundborder--whitesmokeedge {
    background-color: var(--white);
    border-color: var(--smoke);
}

.backgroundborder--white {
    background-color: var(--white);
    border-color: var(--white);
}

.backgroundborder--blue {
    background-color: var(--blue);
    border-color: var(--blue);
}

.backgroundborder--green {
    background-color: var(--green);
    border-color: var(--green);
}

.backgroundborder--chartreuse {
    background-color: var(--chartreuse);
    border-color: var(--chartreuse);
}

.backgroundborder--orange {
    background-color: var(--orange);
    border-color: var(--orange);
}

.backgroundborder--yellow {
    background-color: var(--yellow);
    border-color: var(--yellow);
}

.backgroundborder--red {
    background-color: var(--red);
    border-color: var(--red);
}

.backgroundborder--smoke {
    background-color: var(--smoke);
    border-color: var(--smoke);
}

.backgroundborder--mist {
    background-color: var(--mist);
    border-color: var(--mist);
}

/* #endregion */