/*Dark mode*/
:root {
    /* For scrollbar, forms and other browser ui elements */
    color-scheme: light;

    /*--theme-color: hsl(210, 45%, 36%);*/
    --theme-color: #2e3e50;
    --theme-color-2: #678fb8;
    --theme-h: 210;
    --theme-s: 45%;
    --theme-l: 36%;
    /*--primary-color: #2e3e50;*/
    --color-primary-hover: hsl(210, 50%, 30%);
    --color-primary-active: hsl(210, 55%, 24%);
    --focus-color: hsl(210, 85%, 68%);
    --focus-h: 210;
    --focus-s: 85%;
    --focus-l: 68%;
    --color-on-primary: hsl(0, 0%, 100%);
    /*Background colors*/
    --background-color: hsla(213, 17%, 93%, 1);
    --background-brightness: 97%;
    --second-background-color: hsl(0, 0%, var(--background-brightness));
    --background-accent-1-color: hsl(0, 0%, calc(var(--background-brightness) - 4%));
    --background-accent-2-color: hsl(0, 0%, calc(var(--background-brightness) - 6%));
    --background-accent-3-color: hsl(0, 0%, calc(var(--background-brightness) - 8%));
    --background-accent-4-color: hsl(0, 0%, calc(var(--background-brightness) - 10%));
    --background-accent-5-color: hsl(0, 0%, calc(var(--background-brightness) - 14%));
    --border-color: hsl(0, 0%, calc(var(--background-brightness) - 16%));
    --border-color-pale: hsl(0, 0%, calc(var(--background-brightness) - 10%));
    --border-thickness: 1px;
    /*Text*/
    --text-color: #2e3e50;
    /*--text-color: black;*/
    --secondary-text-color: rgba(46, 62, 80, 0.85);
    --tertiary-text-color: rgba(46, 62, 80, 0.70);
    --quaternary-text-color: rgba(46, 62, 80, 0.60);
    --link-color: var(--theme-color);
    --gray-secondary-text-color: #575757;
    --title-color: black;
    --code-background-color: #dfe1e3;
    /*Filters*/
    /*Style the black svg icons to the primary color #2e3e50 https://angel-rs.github.io/css-color-filter-generator/ */
    /*--theme-color-filter: invert(20%) sepia(9%) saturate(2106%) hue-rotate(172deg) brightness(93%) contrast(86%);*/
    --theme-color-filter: brightness(0) saturate(100%) invert(22%) sepia(12%) saturate(1495%) hue-rotate(172deg) brightness(90%) contrast(89%); /*2e3e50*/
    /*--theme-color-filter: none;*/
    --theme-accent-filter: var(--theme-color-filter); /*Accent only needed for dark mode*/
    --invert-when-dark-filter-inactive: invert(40%); /*dimmed*/;
    --invert-when-dark-filter: none;
    --filter-black-white-opposite-theme: invert(100%);
    --accent-2-filter: invert(17%) sepia(9%) saturate(1712%) hue-rotate(170deg) brightness(92%) contrast(94%);
    /*Other values*/
    --default-box-shadow: 0 3px 25px rgba(46, 62, 80, 0.15);
    /*--default-box-shadow: 0 15px 10px rgba(46, 62, 80, 0.24);*/
    --light-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --black-white-with-theme: white;
    --black-white-opposite-theme: black;
    --mild-black-white-opposite-theme: rgba(0, 0, 0, 0.8);
    --mild-black-white-opposite-theme: #2e3e50;
    /*Hover*/
    --hover-box-shadow: 0 2px 5px rgba(46, 66, 80, 0.12);
    --hover-background-color: hsl(210, 24%, 25%, 0.08);
    --hover-background-color-2: hsl(210, 24%, 25%, 0.12);
    /*Buttons*/
    --btn-color: #f5f5f5;
    --btn-color: white;
    --success-color: #10b981;
    --success-color: hsla(143, 61%, 34%, 1);
    --warning-bg-color: #ffc081;
    --danger-color: hsl(10, 85%, 54%);
    --danger-color-hover: hsl(10, 85%, 44%);
    --warning-color: hsl(47, 75%, 48%);
    --btn-red-background: hsla(6, 63%, 77%, 0.3);
    --btn-red-hover-background: hsla(6, 63%, 77%, 0.8);
    --btn-red-color: var(--danger-color);
    --btn-green-background: hsla(130, 63%, 60%, 0.55);
    --btn-green-hover-background: hsla(130, 63%, 60%, 0.4);
    --panel-green-background: #e6fffa;
    --green-text: hsl(130, 64%, 35%);
    --panel-red-background: #fef2f2;
    --panel-red-text: #991b1b;
    --panel-red-border: #ffbfbf;
    --panel-yellow-background: #fff8dc;
    --panel-yellow-border: #e1ba2d;
    --panel-yellow-text: #b87600;
    --badge-neutral-border: #c7d2fe;
    --badge-neutral-background: var(--background-color);
    --badge-neutral-text: var(--text-color);
    --light-highlight-background: #ffedd4;
    --light-highlight-background-hover: #f1dec4;
}

/* Dark theme based on system preference */
[data-theme="dark"] {
    /* For scrollbar, forms and other browser ui elements */
    color-scheme: dark;
    --a: hsl(210, 46%, 39%);
    --theme-color: hsl(211, 57%, 37%);
    --theme-color: #274d67;
    --color-primary-hover: hsl(210, 60%, 46%);
    --color-primary-active: hsl(210, 60%, 40%);
    --focus-color: hsl(210, 85%, 70%);
    --focus-h: 210;
    --focus-s: 85%;
    --focus-l: 70%;
    --color-on-primary: hsl(0, 0%, 100%);

    --theme-color-2: hsl(212, 43%, 44%);
    /*Background colors*/
    /*--background-color: #101213;*/
    --second-background-color: #181A1B;
    --background-color: hsla(213, 17%, 3%, 1);
    --background-accent-1-color: #212325;
    --background-accent-2-color: #1f2425;
    /*Accent 1 mainly for the client card header to be visible even on accent background*/
    --background-accent-3-color: #262b31;
    --background-accent-4-color: #2c343d;
    --background-accent-5-color: #323a44;
    --background-accent-6-color: #3c4652;
    --border-color: #3c4143;
    --border-color-pale: #2d3335;
    --accent-color-2-when-dark: var(--background-accent-3-color);
    /*Text*/
    --text-color: hsl(210, 19%, 88%);
    --secondary-text-color: #bec9d6;
    --tertiary-text-color: #74818c;
    --quaternary-text-color: #737d8c;
    --link-color: hsl(211, 57%, 77%);
    --gray-secondary-text-color: #acb1c2;
    --title-color: #cbd2d8;
    --title-color: var(--text-color);
    --code-background-color: #2e363e;
    /*Filters https://angel-rs.github.io/css-color-filter-generator*/
    /*Style the black svg icons to a color similar to the primary color*/
    --theme-color-filter: brightness(0) saturate(100%) invert(95%) sepia(7%) saturate(184%) hue-rotate(173deg) brightness(96%) contrast(89%);
    /*--theme-accent-filter: invert(38%) sepia(10%) saturate(1591%) hue-rotate(171deg) brightness(140%) contrast(85%);*/
    --theme-accent-filter: brightness(0) saturate(100%) invert(40%) sepia(12%) saturate(2549%) hue-rotate(175deg) brightness(93%) contrast(85%);
    --invert-when-dark-filter: invert(80%);
    --invert-when-dark-filter-inactive: invert(40%); /*dimmed*/;
    --filter-black-white-opposite-theme: invert(0);
    --accent-2-filter: invert(38%) sepia(6%) saturate(1000%) hue-rotate(180deg) brightness(110%) contrast(80%);
    /*Other values*/
    --default-box-shadow: 0 2px 15px rgba(46, 54, 64, 0.2);
    /*--default-box-shadow: 0 2px 15px var(--background-color);*/
    --black-white-opposite-theme: white;
    --black-white-with-theme: black;
    --mild-black-white-opposite-theme: rgba(255, 255, 255, 0.8);
    /*Hover*/
    --hover-box-shadow: 0 2px 5px rgba(201, 232, 255, 0.12);
    --hover-background-color: #2d3233;
    --hover-background-color-2: #3b3d3d;
    /*Buttons*/
    --success-color: rgba(0, 180, 60, 1);
    --btn-color: #464f5d;
    --warning-bg-color: #c4884e;
    --danger-color: #f3796d;
    --danger-color-hover: #e6685a;
    --warning-color: #f3c46d;
    --btn-red-background: hsla(6, 63%, 60%, 0.15);
    --btn-red-hover-background: hsla(6, 63%, 60%, 0.3);
    --btn-red-color: var(--danger-color);
    --btn-green-background: hsla(130, 63%, 60%, 0.35);
    --btn-green-hover-background: hsla(130, 63%, 60%, 0.5);
    --panel-green-background: #044320;
    --green-text: hsl(130, 100%, 88%);
    --panel-red-background: #7c0c0c;
    --panel-red-text: var(--black-white-opposite-theme);
    --panel-red-border: #833737;
    --panel-yellow-background: #433504;
    --panel-yellow-border: #917915;
    --panel-yellow-text: #d8ce98;
    --badge-neutral-border: #464f5d;
    --badge-neutral-background: var(--background-accent-3-color);
    --badge-neutral-text: var(--text-color);
    --light-highlight-background: #453a2f;
    --light-highlight-background-hover: #52463d;
}