:root {
    --grey-1: #1c2129;
    --grey-2: #393e4e;
    --grey-3: #f8f8f8;
    --grey-4: #262b33;
    --grey-5: #f5f6f9;

    --white-1: #fff;
    --white-2: #fafafa;
    --white-3: #f4f4f4;

    --blue-1: #15355d;
    --blue-2: #1a1d34;
    --blue-3: #101320;
    --blue-4: #1f3a55;
    --blue-5: #214d83;
    --blue-6: #405d7a;
    --blue-7: #ddecf7;

    --ocean-1: #2ba3ff;
    --ocean-2: #003a82;
    --ocean-3: #0573cd;

    --purple-1: #3d2b6b;

    --green-1: #2b521f;
    --green-2: #289993;

    --yellow-1: #4d4412;

    --transparent-1: #00000017;
    --transparent-2: #ffffff90;

    --gradient-1: linear-gradient(180deg, #ebf7fe, #baddff);
    --gradient-2: linear-gradient(45deg, #4c52eb, #8af4ff);
    --gradient-3: linear-gradient(45deg, #04bf68, #8af4ff);
    --gradient-4: linear-gradient(45deg, #ff75ea, #ff8a8a);
}

.bg-gradient-1 {
    background: var(--gradient-1) !important;
}
.bg-gradient-2 {
    background: var(--gradient-2) !important;
}
.bg-gradient-3 {
    background: var(--gradient-3) !important;
}
.bg-gradient-4 {
    background: var(--gradient-4) !important;
}

/* ########################################################## BACKGROUND ################# */

.bg-grey-1 {
    background-color: var(--grey-1) !important;
}
.bg-grey-2 {
    background-color: var(--grey-2) !important;
}
.bg-grey-3 {
    background-color: var(--grey-3) !important;
}
.bg-grey-4 {
    background-color: var(--grey-4) !important;
}
.bg-grey-5 {
    background-color: var(--grey-5) !important;
}

.bg-white-1 {
    background-color: var(--white-1) !important;
}
.bg-white-2 {
    background-color: var(--white-2) !important;
}
.bg-white-3 {
    background-color: var(--white-3) !important;
}

.bg-blue-1 {
    background-color: var(--blue-1) !important;
}
.bg-blue-2 {
    background-color: var(--blue-2) !important;
}
.bg-blue-3 {
    background-color: var(--blue-3) !important;
}
.bg-blue-4 {
    background-color: var(--blue-4) !important;
}
.bg-blue-5 {
    background-color: var(--blue-5) !important;
}
.bg-blue-6 {
    background-color: var(--blue-6) !important;
}
.bg-blue-7 {
    background-color: var(--blue-7) !important;
}

.bg-ocean-1 {
    background-color: var(--ocean-1) !important;
}
.bg-ocean-2 {
    background-color: var(--ocean-2) !important;
}
.bg-ocean-3 {
    background-color: var(--ocean-3) !important;
}

.bg-purple-1 {
    background-color: var(--purple-1) !important;
}

.bg-green-1 {
    background-color: var(--green-1) !important;
}
.bg-green-2 {
    background-color: var(--green-2) !important;
}

.bg-yellow-1 {
    background-color: var(--yellow-1) !important;
}

.bg-transparent-1 {
    background-color: var(--transparent-1) !important;
}
.bg-transparent-2 {
    background-color: var(--transparent-2) !important;
}

.gr-grey-1 {
    background-image: linear-gradient(180deg, var(--grey-2), var(--grey-1));
}

/* ########################################################## TEXT ################# */

.txt-grey-1 {
    color: var(--grey-1) !important;
}
.txt-grey-2 {
    color: var(--grey-2) !important;
}
.txt-grey-3 {
    color: var(--grey-3) !important;
}
.txt-grey-4 {
    color: var(--grey-4) !important;
}

.txt-white-1 {
    color: var(--white-1) !important;
}
.txt-white-2 {
    color: var(--white-2) !important;
}
.txt-white-3 {
    color: var(--white-3) !important;
}

.txt-blue-1 {
    color: var(--blue-1) !important;
}
.txt-blue-2 {
    color: var(--blue-2) !important;
}
.txt-blue-3 {
    color: var(--blue-3) !important;
}
.txt-blue-4 {
    color: var(--blue-4) !important;
}
.txt-blue-5 {
    color: var(--blue-5) !important;
}
.txt-blue-6 {
    color: var(--blue-6) !important;
}

.txt-ocean-1 {
    color: var(--ocean-1) !important;
}
.txt-ocean-2 {
    color: var(--ocean-2) !important;
}
.txt-ocean-3 {
    color: var(--ocean-3) !important;
}

.txt-purple-1 {
    color: var(--purple-1) !important;
}

.txt-green-1 {
    color: var(--green-1) !important;
}
.txt-green-2 {
    color: var(--green-2) !important;
}

.txt-yellow-1 {
    color: var(--yellow-1) !important;
}

.txt-transparent-1 {
    color: var(--transparent-1) !important;
}
.txt-transparent-2 {
    color: var(--transparent-2) !important;
}

.txt-gradient {
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.txt-gradient-1 {
    background-image: var(--gradient-1);
}
.txt-gradient-2 {
    background-image: var(--gradient-2);
}
.txt-gradient-3 {
    background-image: var(--gradient-3);
}

.shadow-1 {
    box-shadow: 0 0 0 1px rgba(0,0,0, 0.04), 0 2px 6px rgba(0,0,0, 0.05), 0 1px 4px rgba(0,0,0, 0.045), 0 8px 32px rgba(0,0,0, 0.045);
}
.shadow-2 {
    box-shadow: 0 5px 3px #00000017;
}
.shadow-3 {
    box-shadow: rgba(50, 50, 93, 0.25) 0 6px 12px -2px, rgba(0, 0, 0, 0.3) 0 3px 7px -3px, rgba(100, 100, 111, 0.2) 0 7px 29px 0;
}