.cos-mode-dark, .cos-mode-black, .cos-mode-reverse {

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

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


    --color-gray-900: rgba(255,255,255, 1);
    --color-gray-800: rgba(255,255,255, .8);
    --color-gray-700: rgba(255,255,255, .75);
    --color-gray-600: rgba(255,255,255, .65);
    --color-gray-500: rgba(255,255,255, .5);
    --color-gray-400: rgba(255,255,255, .45);
    --color-gray-300: rgba(255,255,255, .4);
    --color-gray-200: rgba(255,255,255, .3);
    --color-gray-100: rgba(255,255,255, .2);
    --color-gray-50: #080808;

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

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

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

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

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

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