:root, .cos-mode-light, .cos-mode-white, .cos-mode-dark .cos-mode-reverse {

    --color-white: #fff;
    --color-black: #222;

    /** default fill color / text color */
    --color-light: #fff;
    --color-dark: #222;

    --color-gray-50: #f5f5f5;
    --color-gray-100: #e0e0e0;
    --color-gray-200: #cccccc;
    --color-gray-300: #b8b8b8;
    --color-gray-400: #999999;
    --color-gray-500: #858585;
    --color-gray-600: #666666;
    --color-gray-700: #333333;
    --color-gray-800: #1f1f1f;
    --color-gray-900: #000000;

    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;

    --color-primary-50: #e8e4ff;
    --color-primary-100: #d1caff;
    --color-primary-200: #b8b1ff;
    --color-primary-300: #9c98ff;
    --color-primary-400: #7c80ff;
    --color-primary-500: #5269ff;
    --color-primary-600: #4857d0;
    --color-primary-700: #3d46a2;
    --color-primary-800: #313577;
    --color-primary-900: #25254f;


    --hsl-light: 0, 0%, 100%;
    --hsl-dark: 0, 0%, 0%;

    --hsl-gray-50: 0, 0%, 96%;
    --hsl-gray-100: 0, 0%, 88%;
    --hsl-gray-200: 0, 0%, 80%;
    --hsl-gray-300: 0, 0%, 73%;
    --hsl-gray-400: 0, 0%, 60%;
    --hsl-gray-500: 0, 0%, 52%;
    --hsl-gray-600: 0, 0%, 40%;
    --hsl-gray-700: 0, 0%, 20%;
    --hsl-gray-800: 0, 0%, 12%;
    --hsl-gray-900: 240, 6%, 10%;

    --hsl-slate-50: 210, 40%, 98%;
    --hsl-slate-100: 210, 40%, 96%;
    --hsl-slate-200: 214, 32%, 91%;
    --hsl-slate-300: 213, 27%, 84%;
    --hsl-slate-400: 215, 20%, 65%;
    --hsl-slate-500: 215, 16%, 47%;
    --hsl-slate-600: 215, 19%, 35%;
    --hsl-slate-700: 215, 25%, 27%;
    --hsl-slate-800: 217, 33%, 17%;
    --hsl-slate-900: 222, 47%, 11%;

    --hsl-primary-50: 249, 100%, 95%;
    --hsl-primary-100: 248, 100%, 90%;
    --hsl-primary-200: 245, 100%, 85%;
    --hsl-primary-300: 242, 100%, 80%;
    --hsl-primary-400: 238, 100%, 74%;
    --hsl-primary-500: 232, 100%, 66%;
    --hsl-primary-600: 233, 59%, 55%;
    --hsl-primary-700: 235, 45%, 44%;
    --hsl-primary-800: 237, 42%, 33%;
    --hsl-primary-900: 240, 36%, 23%;

    --font-xs: 1.2rem;
    --font-sm: 1.2rem;
    --font-md: 1.4rem;
    --font-lg: 1.6rem;
    --font-xl: 2.0rem;
    --font-2xl: 2.4rem;
    --font-3xl: 3.0rem;

    --leading-xs: 1.4rem;
    --leading-sm: 1.8rem;
    --leading-md: 2.1rem;
    --leading-lg: 2.4rem;
    --leading-xl: 3.0rem;
    --leading-2xl: 3.6rem;

    --icon-xs: 1.2rem;
    --icon-sm: 1.2rem;
    --icon-md: 1.4rem;
    --icon-lg: 1.6rem;
    --icon-xl: 2.0rem;
    --icon-2xl: 2.4rem;

    --height-xs: 2.0rem;
    --height-sm: 2.4rem;
    --height-md: 3.2rem;
    --height-lg: 4.0rem;
    --height-xl: 4.8rem;
    --height-2xl: 5.6rem;

    --width-xs: 2.0rem;
    --width-sm: 2.4rem;
    --width-md: 3.2rem;
    --width-lg: 4.0rem;
    --width-xl: 4.8rem;
    --width-2xl: 5.6rem;

    --padding-xs: 0.6rem;
    --padding-sm: 0.8rem;
    --padding-md: 1.2rem;
    --padding-lg: 1.6rem;
    --padding-xl: 2.0rem;
    --padding-2xl: 2.4rem;

    --margin-xs: 0.4rem;
    --margin-sm: 0.4rem;
    --margin-md: 0.6rem;
    --margin-lg: 0.6rem;
    --margin-xl: 0.6rem;
    --margin-2xl: 0.6rem;

    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    --rounded: 0.4rem;
    --rounded-md:  0.4rem;
    --border-md: 0.1rem;
    --border: 1px;
}