:root {
    --color-white: 255, 255, 255;
    --color-black: 0, 0, 0;
    --color-error-25: 255, 251, 250;
    --color-error-50: 254, 243, 242;
    --color-error-100: 254, 228, 226;
    --color-error-200: 254, 205, 202;
    --color-error-300: 253, 162, 155;
    --color-error-400: 249, 112, 102;
    --color-error-500: 240, 68, 56;
    --color-error-600: 217, 45, 32;
    --color-error-700: 180, 32, 24;
    --color-error-800: 145, 32, 24;
    --color-error-900: 122, 39, 26;
    --color-error-950: 85, 22, 12;
    --color-success-25: 246, 254, 249;
    --color-success-50: 236, 253, 243;
    --color-success-100: 220, 250, 230;
    --color-success-200: 171, 239, 198;
    --color-success-300: 117, 224, 167;
    --color-success-400: 71, 205, 137;
    --color-success-500: 23, 178, 106;
    --color-success-600: 7, 148, 85;
    --color-success-700: 6, 118, 71;
    --color-success-800: 8, 93, 58;
    --color-success-900: 7, 77, 49;
    --color-success-950: 5, 51, 33;
    --color-warning-25: 255, 252, 245;
    --color-warning-50: 255, 250, 235;
    --color-warning-100: 254, 240, 199;
    --color-warning-200: 254, 223, 137;
    --color-warning-300: 254, 200, 75;
    --color-warning-400: 253, 175, 34;
    --color-warning-500: 247, 144, 9;
    --color-warning-600: 220, 104, 3;
    --color-warning-700: 181, 71, 8;
    --color-warning-800: 147, 55, 13;
    --color-warning-900: 122, 46, 14;
    --color-warning-950: 78, 29, 9;

    --radius-none: 0px;
    --radius-xxs: 2px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 20px;
    --radius-4xl: 24px;
    --radius-5xl: 32px;
    --radius-6xl: 40px;
    --radius-7xl: 48px;
    --radius-8xl: 64px;
    --radius-9xl: 80px;
    --radius-10xl: 96px;
    --radius-full: 9999px;

    --spacing-none: 0px;
    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-3xl: 24px;
    --spacing-4xl: 32px;
    --spacing-5xl: 40px;
    --spacing-6xl: 48px;
    --spacing-7xl: 64px;
    --spacing-8xl: 80px;
    --spacing-9xl: 96px;
    --spacing-10xl: 128px;
    --spacing-11xl: 160px;

    --width-xxs: 320px;
    --width-xs: 384px;
    --width-sm: 480px;
    --width-md: 560px;
    --width-lg: 640px;
    --width-xl: 768px;
    --width-2xl: 1024px;
    --width-3xl: 1280px;
    --width-4xl: 1440px;
    --width-5xl: 1600px;
    --width-6xl: 1920px;
}

@media screen and (max-width: 1280px) and (min-width: 745px) {
    :root {
        --radius-2xl: 14px;
        --radius-3xl: 18px;
        --radius-4xl: 20px;
        --radius-5xl: 28px;
        --radius-6xl: 36px;
        --radius-7xl: 40px;
        --radius-8xl: 56px;
        --radius-9xl: 72px;
        --radius-10xl: 80px;

        --spacing-xs: 3px;
        --spacing-sm: 4px;
        --spacing-md: 6px;
        --spacing-lg: 9px;
        --spacing-xl: 12px;
        --spacing-2xl: 16px;
        --spacing-3xl: 18px;
        --spacing-4xl: 24px;
        --spacing-5xl: 30px;
        --spacing-6xl: 36px;
        --spacing-7xl: 48px;
        --spacing-8xl: 60px;
        --spacing-9xl: 72px;
        --spacing-10xl: 96px;
        --spacing-11xl: 120px;
    }
}

@media screen and (max-width: 744px) {
    :root {
        --radius-lg: 8px;
        --radius-xl: 10px;
        --radius-2xl: 12px;
        --radius-3xl: 14px;
        --radius-4xl: 16px;
        --radius-5xl: 24px;
        --radius-6xl: 28px;
        --radius-7xl: 32px;
        --radius-8xl: 48px;
        --radius-9xl: 56px;
        --radius-10xl: 64px;

        --spacing-xxs: 1px;
        --spacing-xs: 2px;
        --spacing-sm: 3px;
        --spacing-md: 4px;
        --spacing-lg: 6px;
        --spacing-xl: 8px;
        --spacing-2xl: 10px;
        --spacing-3xl: 12px;
        --spacing-4xl: 16px;
        --spacing-5xl: 20px;
        --spacing-6xl: 24px;
        --spacing-7xl: 32px;
        --spacing-8xl: 40px;
        --spacing-9xl: 48px;
        --spacing-10xl: 64px;
        --spacing-11xl: 80px;
    }
}