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

:root {
    /* fonts */
    --text-sm-leading-5-font-normal: sans-serif;
    --text-medium-text: sans-serif;
    --font-helvetica-neue: "Helvetica Neue";

    /* 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-xs: 12px;
    --font-size-9xl: 28px;

    /* Colors */
    --white: #fff;
    --default-gray-300: #d1d5db;
    --default-gray-500: #6b7280;
    --text-grey: #374151;
    --grey: #8298ab;
    --color-whitesmoke: #f6f7f8;
    --color-gray-100: rgba(0, 0, 0, 0.1);
    --color-gray-200: rgba(255, 255, 255, 0.3);
    --color-silver: rgba(200, 200, 200, 0.6);
    --color-black: #000;

    /* Gaps */
    --gap-xl: 20px;

    /* Paddings */
    --padding-4xs: 9px;
    --padding-smi: 13px;
    --padding-xl: 20px;
    --padding-5xl: 24px;
    --padding-xs: 12px;
    --padding-11xl: 30px;

    /* border radiuses */
    --br-7xs: 6px;
    --br-mini: 15px;
    --br-3xs: 10px;

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