:root {
    --du-color-primary: #eb2d4d;
    --du-color-secondary: #50e3c2;
    --du-color-background: #f5f7fa;
    --du-color-text: #333333;
    --du-color-border: #e0e0e0;
    --du-color-blue-dark: #1e1e32;
    --du-color-blue-dark-2: #23233c;
    --du-color-black-80: #4b4b5b;
    --du-color-black-70: #626270;
    --du-color-white: #ffffff;

    --du-font-family: 'Inter', sans-serif;
    --du-font-size-md: 16px;
    --du-font-size-sm: 14px;
    --du-font-size-lg: 18px;

    --du-border-radius-sm: 6px;
    --du-border-radius: 8px;

    --du-spacing-xs: 4px;
    --du-spacing-sm: 8px;
    --du-spacing-md: 16px;
    --du-spacing-lg: 24px;
    --du-spacing-xl: 32px;
    --du-spacing-2xl: 40px;

    --du-transition-duration: 0.3s;

    .du-dark {
        --du-color-text: var(--du-color-white);
    }
}