@media (prefers-color-scheme: dark) {
    :root,
    html {




        --background-50: #010308;
        --background-100: #12131e;
        --background-200: #1f2232;
        --background-300: #26293b;
        --action: #1bb869;

        --font-white: #ffffff;
        --font-100: #636576;
        --font-200: #888896;
        --font-300: #c6c6e6;




        --background-black: #1f1f1f; /* Dark mode background color */
        --background-gray: #646464; /* Dark mode background gray color */

        --gray: #0e0e0e; /* Dark mode gray color */
        
        --error: #CF6679;
        
        --success: #5CDB95;
        --primary-variant: #05386B;
        --secondary: #379683;

        --page_background: black; /* Dark mode page background color */

        /* Action colors in dark mode */

        --action1: rgb(80, 253, 224);
        --action2: rgb(224, 100, 255);

        --pastel_purple: #8f86da;
        --pastel_pink: #ce7bc1;
        --pastel_green: #80ce7e;



        --pastel_orange: #E8A97C;
        --pastel_blue: #85CCC9;
        --pastel_red: #E27C5F;

        font-size: 16px;

        --min-width: 900px;
    }
}

@media (prefers-color-scheme: light) {
    :root,
    html {

        --background-50: #e9f1ff;
        --background-100: #d7dce6;
        --background-200: #e5e8f1;
        --background-300: #eef0fc;
        --action: #11b394;


        --font-white: #161616;
        --font-100: #d9dadd;
        --font-200: #999daa;
        --font-300: #313139;



        --background-black: #1f1f1f; /* Dark mode background color */
        --background-gray: #646464; /* Dark mode background gray color */
        --gray: #0e0e0e; /* Dark mode gray color */
        
        --error: #CF6679;
        
        --success: #5CDB95;
        --primary-variant: #05386B;
        --secondary: #379683;

        --page_background: black; /* Dark mode page background color */

        /* Action colors in dark mode */

        --action1: rgb(80, 253, 224);
        --action2: rgb(224, 100, 255);

        --pastel_purple: #8f86da;
        --pastel_pink: #ce7bc1;
        --pastel_green: #80ce7e;
        --pastel_orange: #E8A97C;
        --pastel_blue: #85CCC9;
        --pastel_red: #E27C5F;

        font-size: 16px;

        --min-width: 900px;
    }
}