:root {
    --primary: #0f443f;
    --secondary: #ace6a4;

    /* GENERAL */
    --background: #fdfdfd;
    --main-background: #f5f5f5;
    --internal-card-bg: #f6f6f6;
    --internal-card-border: #e1e1e1;
    --bar-background: #ffffff;
    --menu: linear-gradient(0deg, #1e4e41 0%, #09262b 44.93%);
    --menu-btn: #0f443f;
    --border: #e7e8ed;
    --content-background: #eef0f8;
    --scroll-background: #eef0f8;
    --scroll: #c1c2ca;
    --text: #0f1011;
    --text-muted: #6c757d;
    --title: #181c32;
    --btn-text: #b5b5c3;
    --filter-background: #ffffff;
    --integration-border: #ecedf4;
    --card-background: #ffffff;
    --small-card-bg: #f4f4f4;

    /* DATEPICKER */
    --datepicker-border: #e7e8ed;
    --datepicker-off-ends: #ffffff;
    --datepicker-text: #3f4254;
    --datepicker-label-text: #003535;
    --datepicker-btn-text: #003535;
    --datepicker-btn-background: #c8f4c3;
    --datepicker-btn-border: #ace6a4;
    --datepicker-calendar-background: #ffffff;
    --datepicker-background: #ffffff;
    --datepicker-label-background: #f3f6f9;

    /* CHART */
    --chart-text-color: #0f1011;
    --chart-yaxis-color: #6c757d;
    --chart-xaxis-color: #3f4254;
    --chart-inverted-text-color: #f3f4f6;
    --chart-background: #f3f4f6;
    --chart-border: #e7e8ed;
    --chart-title: #003535;
    --chart-secondary: #66cc99;
    --chart-grid-color: #e7e8ed;
}

html.dark-mode {
    /* GENERAL */
    --background: #0c0b0b;
    --main-background: #0f0e0e;
    --internal-card-bg: #2b2b2b;
    --internal-card-border: #e0e0e3;
    --bar-background: #0c0b0b;
    --menu: #0c0b0b;
    --menu-btn: #1e1e20;
    --border: #2b2b2b;
    --content-background: #0f0e0e;
    --scroll-background: #0f0e0e;
    --scroll: #2b2b2b;
    --text: #f3f4f6;
    --text-muted: #c2c2c2;
    --title: #caf7c4;
    --btn-text: #e7e8ed;
    --filter-background: #1e1e1f;
    --integration-border: #2b2b2b;
    --card-background: #1e1e20;
    --small-card-bg: #0f1011;

    /* DATEPICKER */
    --datepicker-border: #000000;
    --datepicker-off-ends: #0f1011;
    --datepicker-text: #e7e8ed;
    --datepicker-label-text: #f3f4f6;
    --datepicker-btn-text: #ffffff;
    --datepicker-btn-background: #003535;
    --datepicker-btn-border: #034040;
    --datepicker-calendar-background: #343434;
    --datepicker-background: #0c0b0b;
    --datepicker-label-background: #2b2b2b;

    /* CHART */
    --chart-text-color: #f3f4f6;
    --chart-yaxis-color: #f3f4f6;
    --chart-xaxis-color: #f3f4f6;
    --chart-inverted-text-color: #0f1011;
    --chart-background: #0f1011;
    --chart-border: #2b2b2b;
    --chart-title: #66cc99;
    --chart-grid-color: #2b2b2b;
}
