:root {
    /* Colors */
    --color-white: #fff;
    --color-black: #000;
    --color-light-gray: #f5f5f5;
    --color-green: #ADFF2F;
    --color-dark-bg: #101010;

    /* Radius */
    --radius-xl: 40px;
    --radius-lg: 36px;
    --radius-md: 24px;
    --radius-sm: 16px;
    --radius-xs: 12px;
    --radius-xxs: 8px;

    /* Spacing */
    --spacing-xxl: 36px;
    --spacing-xl: 30px;
    --spacing-lg: 24px;
    --spacing-md: 20px;
    --spacing-sm: 16px;
    --spacing-xs: 12px;
    --spacing-xxs: 8px;
    --spacing-tiny: 6px;
    --spacing-micro: 4px;
    --spacing-line: 2px;

    /* Font size */
    --text-xxl: 24px;
    --text-xl: 20px;
    --text-lg: 18px;
    --text-md: 16px;
    --text-sm: 14px;
    --text-xs: 12px;

    /* Font weight */
    --weight-black: 900;
    --weight-bold: 700;
    --weight-semibold: 600;
    --weight-medium: 500;
    --weight-regular: 400;

    /* Z-index level*/
    --z-modal: 1000;
    --z-overlay: 800;
    --z-dropdown: 100;
    --z-nav: 999;
}