:root {
    /* Colors */
    --color-primary: #006EC3;
    --color-primary-hover: #004B88;
    --color-primary-disable: #8EB8FF;
    --color-primary-container: #D0DFFF;
    --color-on-primary: #FFFFFF;
    --color-secondary: #101112;
    --color-text: #292A2C;
    --color-outline: #DDDDE0;
    --color-outline-variant: #B5B6BA;
    --color-background: #F9FAFB;
    --color-overlay: rgba(72, 74, 77, 0.5);
    --color-surface: #FFFFFF;
    --color-grey-text: #272424;
    --color-grey-base: #918887;
    --color-grey-surface: #FFFFFF;
    --color-secondary-stroke: #B4AFAD;

    /* Typography */
    --font-family: "Golos Text", Helvetica, Arial, sans-serif;
    
    /* Spacing */
    --space-4xs: 4px;
    --space-3xs: 8px;
    --space-xs: 12px;
    --space-m: 16px;
    --space-l: 20px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --space-4xl: 64px;
    
    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
}