.light-theme {
    --login-background: #b9d6ec;

    --primary: #0079d6;
    --on-primary: #ffffff;

    --background: #ededed;
    --table-header: #dbdbdb;
    --secondary-btn: #6f8aa0;
    --accordion: #d0d1d3;
    --navbar: #bdbdbd;
    --surface-gradient: linear-gradient(118deg, #f3f3f3, #f6f6f6);

    --on-background: #121212;
    --navbar-selected: #1a1a1a;
    --on-navbar: #636363;
    --on-surface-1: #121212;
    --on-surface-2: #4d4d4d;

    --highlight: rgba(41, 162, 255, 0.33);
    --outline: rgba(128, 128, 128, 0.23);
    --surface-1: #d9d9d9;
    --surface-2: #bfbfbf;
    --selected-stroke: #439be0;

    --error: #ba1a1a;
    --error-75: #ef8f8f;
    --error-85: #f6bcbc;
    --error-95: #fce9e9;

    --warning: #e0b51f;
    --warning-75: #efda8f;
    --warning-85: #f6e9bc;
    --warning-95: #fcf8e9;

    --success: #7dba1a;
    --success-75: #cbef8f;
    --success-85: #e0f6bc;
    --success-95: #f5fce9;

    --sans: 'Noto Sans';
}

.dark-theme {
    --login-background: #143146;

    /* --primary: #0078d4; */
    --on-primary: #ececec;

    --background: #121212;
    --table-header: #232323;
    --secondary-btn: #648196;
    --accordion: #2c2d2f;
    --navbar: #434343;
    --surface-gradient: linear-gradient(118deg, #1d1d1d, #121212);

    --on-background: #ececec;
    --navbar-selected: #e6e6e6;
    --on-navbar: #9b9b9b;
    --on-surface-1: #ececec;
    --on-surface-2: #b3b3b3;

    --highlight: rgba(0, 120, 212, 0.33);
    --outline: rgba(128, 128, 128, 0.23);
    --surface-1: #333333;
    /* --surface-2: #595959; */
    --selected-stroke: #c6e2f5;

    --error: #ba1a1a;
    --error-75: #ef8f8f;
    --error-85: #f6bcbc;
    --error-95: #fce9e9;

    --warning: #e0b51f;
    --warning-75: #efda8f;
    --warning-85: #f6e9bc;
    --warning-95: #fcf8e9;

    --success: #7dba1a;
    --success-75: #cbef8f;
    --success-85: #e0f6bc;
    --success-95: #f5fce9;

    /* Transition to new colors */
    --primary: #0f97ff;
    --body: #ffffff;
    --surface-2: #292929;
    --surface-3: #333333;
    --surface-4: #3d3d3d;
    --surface-5: #474747;
    --header: #ffffff;
    --subheader: #bfbfbf;
    --mono-1: #bfbfbf;
    --mono-2: #808080;
    --mono-3: #404040;

    --sans: 'Noto Sans';
}