body {
    margin: 0;
    line-height: normal;
}

:root {
    /* fonts */
    --text-sm-leading-5-font-normal: sans-serif;
    --text-medium-text: sans-serif;

    /* font sizes */
    --text-sm-leading-5-font-normal-size: 14px;
    --font-size-base: 16px;
    --text-medium-text-size: 17px;
    --text-small-text-size: 15px;
    --font-size-smi: 13px;
    --font-size-xl: 20px;
    --font-size-5xl: 24px;

    /* Colors */
    --white: #fff;
    --default-gray-300: #d1d5db;
    --default-gray-500: #6b7280;
    --text-grey: #374151;
    --grey: #8298ab;
    --color-lavender: #ebebff;
    --color-mediumslateblue: #6366f1;
    --color-black: #000;

    /* Gaps */
    --gap-13xl: 32px;
    --gap-3xs: 10px;
    --gap-5xs: 8px;

    /* Paddings */
    --padding-4xs: 9px;
    --padding-smi: 13px;
    --padding-xl: 20px;
    --padding-2xs: 11px;

    /* border radiuses */
    --br-7xs: 6px;
    --br-xl: 20px;

    /* Effects */
    --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.05);
}