@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

:root {
    /* Primary */
    --primary-1: #6c8ba9;
    --primary-2: #55799c;
    --primary-3: #41678b;
    --primary-4: #2d5274;
    --primary-5: #22425f;
    --primary-base: #132a3f;
    --primary-6: #0a1d2f;
    --primary-7: #03111d;
    --primary-8: #03111d;

    /* Greyscale */
    --greyscale-0: #ffffff;
    --greyscale-05: #fcfcfd;
    --greyscale-1: #f9fafb;
    --greyscale-2: #f2f4f7;
    --greyscale-3: #eaecf0;
    --greyscale-4: #d0d5dd;
    --greyscale-5: #98a2b3;
    --greyscale-6: #667085;
    --greyscale-7: #475467;
    --greyscale-8: #344054;
    --greyscale-9: #1d2939;
    --greyscale-10: #101828;

    /* Green */
    --green-0: #daffee;
    --green-1: #75febe;
    --green-2: #53f3a9;
    --green-3: #3ce697;
    --green-4: #2da485;
    --green-5: #1bc777;
    --green-base: #12b76a;
    --green-6: #0dad63;
    --green-7: #09a35c;
    --green-8: #069151;
    --green-9: #037c44;
    --green-10: #026336;

    /* Yellow */
    --yellow-0: #fff4df;
    --yellow-1: #fffea1;
    --yellow-2: #ffdf27f;
    --yellow-3: #ffc761;
    --yellow-4: #ffbe47;
    --yellow-5: #ffb836;
    --yellow-base: #fdb022;
    --yellow-6: #faa416;
    --yellow-7: #f1a20f;
    --yellow-8: #df940b;
    --yellow-9: #d18905;
    --yellow-10: #b47502;

    /* Red */
    --red-0: #ffeeff;
    --red-1: #ffd7d7;
    --red-2: #ffb7b7;
    --red-3: #fea3a3;
    --red-4: #ff8e8e;
    --red-5: #ff8181;
    --red-base: #ff6b6b;
    --red-6: #ff5d5d;
    --red-7: #fd4f4f;
    --red-8: #fc4444;
    --red-9: #fc3333;
    --red-10: #ee1818;

    /* Purple */
    --purple-0: #e8ddff;
    --purple-1: #d9c8f4;
    --purple-2: #cbb3f0;
    --purple-3: #b999ea;
    --purple-4: #a880e5;
    --purple-5: #9666e0;
    --purple-base: #8a55dd;
    --purple-6: #7c3fd9;
    --purple-7: #6d2ad5;
    --purple-8: #5721ab;
    --purple-9: #4c1d95;
    --purple-10: #2c1155;

    /* Cyan */
    --cyan-0: #cde9f4;
    --cyan-1: #9bd3e9;
    --cyan-2: #7ec6e2;
    --cyan-3: #61b9db;
    --cyan-4: #44acd5;
    --cyan-5: #2ea0cc;
    --cyan-base: #28bcb3;
    --cyan-6: #257fa2;
    --cyan-7: #206f8e;
    --cyan-8: #1b5f79;
    --cyan-9: #164e63;
    --cyan-10: #09212a;

    /* Typography */
    --headline-36-size: 36px;
    /* --headline-36-line-height: 54px; */
    --headline-36-letter-spacing: -2%;

    --headline-28-size: 28px;
    /* --headline-28-line-height: 56px; */
    --headline-28-letter-spacing: -2%;

    --headline-24-size: 24px;
    /* --headline-24-line-height: 28px; */
    --headline-24-letter-spacing: -2%;

    --title-24-size: 24px;
    /* --title-24-line-height: 30px; */
    --title-24-letter-spacing: -2%;

    --title-20-size: 20px;
    /* --title-20-line-height: 28px; */
    --title-20-letter-spacing: -2%;

    --title-16-size: 16px;
    /* --title-16-line-height: 24px; */
    --title-16-letter-spacing: -2%;

    --title-14-size: 14px;
    /* --title-14-line-height: 18px; */
    --title-14-letter-spacing: -2%;

    --title-12-size: 12px;
    /* --title-12-line-height: 16px; */
    --title-12-letter-spacing: -2%;

    --title-10-size: 10px;
    /* --title-10-line-height: 12px; */
    --title-10-letter-spacing: -2%;

    --caption-20-size: 20px;
    /* --caption-20-line-height: 28px; */
    --caption-20-letter-spacing: 0%;

    --caption-16-size: 16px;
    /* --caption-16-line-height: 24px; */
    --caption-16-letter-spacing: 0%;

    --caption-14-size: 14px;
    /* --caption-14-line-height: 20px; */
    --caption-14-letter-spacing: 0%;

    --caption-12-size: 12px;
    /* --caption-12-line-height: 16px; */
    --caption-12-letter-spacing: 0%;

    --caption-10-size: 10px;
    /* --caption-10-line-height: 12px; */
    --caption-10-letter-spacing: 0%;

    --body-20-size: 20px;
    /* --body-20-line-height: 28px; */
    --body-20-letter-spacing: 0%;

    --body-16-size: 16px;
    /* --body-16-line-height: 24px; */
    --body-16-letter-spacing: 0%;

    --body-14-size: 14px;
    /* --body-14-line-height: 20px; */
    --body-14-letter-spacing: 0%;

    --body-12-size: 12px;
    /* --body-12-line-height: 18px; */
    --body-12-letter-spacing: 0%;
}