/* ================================= COLORS ================================= */

:root {
    --lightBlue100: #FFFFFF;
    --lightBlue200: #F7F7FB;
    --lightBlue300: #F0F1F7;
    --lightBlue400: #EAEBF3;
    --lightBlue500: #E3E4EF;
    --lightBlue600: #DBDDE8;
    --lightBlue700: #D1D3DF;
    --lightBlue800: #C9CBD8;
    --lightBlue900: #BFC1CF;

    --lightGreen100: #F0FEF3;
    --lightGreen200: #EDFAEF;
    --lightGreen300: #EAF7EC;
    --lightGreen400: #E6F3E8;
    --lightGreen500: #E3EFE5;
    --lightGreen600: #DAE7DD;
    --lightGreen700: #D2E0D5;
    --lightGreen800: #C9D8CD;
    --lightGreen900: #BFCEC3;

    --lightOrange100: #FEF5F0;
    --lightOrange200: #FAF2ED;
    --lightOrange300: #F7EEEA;
    --lightOrange400: #F3EBE7;
    --lightOrange500: #F0E8E4;
    --lightOrange600: #E7DFDA;
    --lightOrange700: #E0D7D2;
    --lightOrange800: #D7CEC8;
    --lightOrange900: #CFC5BF;

    --lightRed100: #FEF0F0;
    --lightRed200: #FAECEC;
    --lightRed300: #F7EAEA;
    --lightRed400: #F3E6E6;
    --lightRed500: #EFE3E3;
    --lightRed600: #E7DADA;
    --lightRed700: #DFD1D1;
    --lightRed800: #D7C9C9;
    --lightRed900: #CFC0C0;

    --vibrantBlue100: #7987FF;
    --vibrantBlue200: #596BFF;
    --vibrantBlue300: #3C50FF;
    --vibrantBlue400: #1E35FF;
    --vibrantBlue500: #011BFD;
    --vibrantBlue600: #0119E8;
    --vibrantBlue700: #0116D0;
    --vibrantBlue800: #0113B5;
    --vibrantBlue900: #01119B;

    --vibrantGreen100: #7BFF8F;
    --vibrantGreen200: #5BFF76;
    --vibrantGreen300: #3CFF5E;
    --vibrantGreen400: #1EFF47;
    --vibrantGreen500: #01FD2F;
    --vibrantGreen600: #01E628;
    --vibrantGreen700: #01CB1F;
    --vibrantGreen800: #01B317;
    --vibrantGreen900: #01970F;

    --vibrantOrange100: #FFB27C;
    --vibrantOrange200: #FF9F5B;
    --vibrantOrange300: #FF8D3B;
    --vibrantOrange400: #FF7D20;
    --vibrantOrange500: #FF6B01;
    --vibrantOrange600: #E25F01;
    --vibrantOrange700: #C85401;
    --vibrantOrange800: #AB4801;
    --vibrantOrange900: #903C01;

    --vibrantRed100: #FF7979;
    --vibrantRed200: #FF5C5C;
    --vibrantRed300: #FF3C3C;
    --vibrantRed400: #FF1E1E;
    --vibrantRed500: #FE0101;
    --vibrantRed600: #E10101;
    --vibrantRed700: #C70101;
    --vibrantRed800: #AC0101;
    --vibrantRed900: #8E0101;

    --darkBlue100: #0E1650;
    --darkBlue200: #0C134A;
    --darkBlue300: #091044;
    --darkBlue400: #070D3E;
    --darkBlue500: #040A38;
    --darkBlue600: #030931;
    --darkBlue700: #020729;
    --darkBlue800: #020623;
    --darkBlue900: #01041C;

    --darkGreen100: #0F511D;
    --darkGreen200: #0C4A1A;
    --darkGreen300: #094416;
    --darkGreen400: #063D13;
    --darkGreen500: #043710;
    --darkGreen600: #03310E;
    --darkGreen700: #022A0C;
    --darkGreen800: #02230A;
    --darkGreen900: #011C08;

    --darkOrange100: #51280E;
    --darkOrange200: #4A240C;
    --darkOrange300: #442009;
    --darkOrange400: #3D1B06;
    --darkOrange500: #371804;
    --darkOrange600: #311503;
    --darkOrange700: #2A1102;
    --darkOrange800: #230F02;
    --darkOrange900: #1C0B01;

    --darkRed100: #510E0E;
    --darkRed200: #4A0C0C;
    --darkRed300: #440909;
    --darkRed400: #3D0606;
    --darkRed500: #370404;
    --darkRed600: #300303;
    --darkRed700: #2A0202;
    --darkRed800: #230202;
    --darkRed900: #1C0101;
}

/* =============================== TYPOGRAPHY =============================== */

.typography-title {
    font-family: "Poppins", serif;
    font-style: normal;
    color: var(--darkBlue900);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.28;
}

.typography-subtitle {
    font-family: "Poppins", serif;
    font-style: normal;
    color: var(--darkBlue900);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.28;
}

.typography-header {
    font-family: "Poppins", serif;
    font-style: normal;
    color: var(--darkBlue900);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.28;
}

.typography-subheader {
    font-family: "Poppins", serif;
    font-style: normal;
    color: var(--darkBlue900);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.28;
}

.typography-sectionheader {
    font-family: "Poppins", serif;
    font-style: normal;
    color: var(--darkBlue900);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.28;
}

.typography-body {
    font-family: "Poppins", serif;
    font-style: normal;
    color: var(--darkBlue900);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

.typography-callout {
    font-family: "Poppins", serif;
    font-style: normal;
    color: var(--darkBlue900);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.typography-footnote {
    font-family: "Poppins", serif;
    font-style: normal;
    color: var(--darkBlue900);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

.typography-caption {
    font-family: "Poppins", serif;
    font-style: normal;
    color: var(--darkBlue900);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

.typography-detail {
    font-family: "Poppins", serif;
    font-style: normal;
    color: var(--darkBlue900);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
}

.typography-data {
    font-family: "Poppins", serif;
    font-style: normal;
    color: var(--darkBlue900);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
}

/* ================================== OTHER ================================= */

a.filled-button {
    text-decoration: none;
}

button,
.filled-button {
    font-family: "Poppins", serif;
    border-radius: 14px;
    border: none;
    padding: 20px 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.28;
}

button.primary,
.filled-button.primary {
    background-color: var(--vibrantBlue500);
    color: var(--lightBlue100);
}

/* ================================== OTHER ================================= */

:root {
    --page-margin: 18px;
}

.loader {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: block;
    margin: 15px auto;
    position: relative;
    background: var(--lightBlue500);
    box-shadow: -24px 0 var(--lightBlue500), 24px 0 var(--lightBlue500);
    box-sizing: border-box;
    animation: loaderAnimation 2s linear infinite;
}

@keyframes loaderAnimation {
    33% {
        background: var(--lightBlue500);
        box-shadow: -24px 0 var(--vibrantBlue500), 24px 0 var(--lightBlue500);
    }

    66% {
        background: var(--vibrantBlue500);
        box-shadow: -24px 0 var(--lightBlue500), 24px 0 var(--lightBlue500);
    }

    100% {
        background: var(--lightBlue500);
        box-shadow: -24px 0 var(--lightBlue500), 24px 0 var(--vibrantBlue500);
    }
}