:root {
    /* colors */
    --color-grey-500: #4D4F62;
    --color-grey-400: #6A7178;
    --color-red: #EA5454;
    --color-cyan: #44D3D2;
    --color-blue: #549EF2;
    --color-orange: #FCAE4A;

    /* spacing */
    --space-1000: 5rem; /* 80px */
    --space-925: 4.625rem; /* 74px */
    --space-750: 3.75rem; /* 60px */
    --space-700: 3.5rem; /* 56px */
    --space-575: 2.875rem; /* 46px */
    --space-500: 2.5rem; /* 40px */
    --space-400: 2rem; /* 32px */
    --space-300: 1.5rem; /* 24px */
    --space-200: 1rem; /* 16px */
    --space-100: 0.5rem; /* 8px */
    --space-50: 0.25rem; /* 4px */
    --space-30: 0.375rem; /* 6px, fix the name of this space*/
}


/* typography */
@font-face {
    src: url("../assets/fonts/woff2/Poppins-ExtraLight.woff2");
    font-family: "Poppins-ExtraLight";
    font-weight: 200;
}
@font-face {
    src: url("../assets/fonts/woff2/Poppins-Regular.woff2");
    font-family: "Poppins-Regular";
    font-weight: 400;
}
@font-face {
    src: url("../assets/fonts/woff2/Poppins-SemiBold.woff2");
    font-family: "Poppins-SemiBold";
    font-weight: 600;
}

.text-preset-1 {
    font-family: "Poppins-SemiBold", sans-serif;
    font-weight: 600;
    font-size: 2.25rem; /* 36px */
    line-height: 140%;
    letter-spacing: 0.016rem; /* ~ 0.25px */
}
.text-preset-2 {
    font-family: "Poppins-ExtraLight", sans-serif;
    font-weight: 200;
    font-size: 2.25rem; /* 36px */
    line-height: 140%;
    letter-spacing: 0.016rem; /* ~ 0.25px */
}
.text-preset-3 {
    font-family: "Poppins-SemiBold", sans-serif;
    font-weight: 600;
    font-size: 1.25rem; /* 20px */
    line-height: 135%;
    letter-spacing: 0;
}
.text-preset-4 {
    font-family: "Poppins-Regular", sans-serif;
    font-weight: 400;
    font-size: 0.9375rem; /* 15px */
    line-height: 140%;
    letter-spacing: 0;
}
.text-preset-5 {
    font-family: "Poppins-Regular", sans-serif;
    font-weight: 400;
    font-size: 0.8125rem; /* 13px */
    line-height: 160%;
    letter-spacing: 0;
}