body {
  --accent-primary: #69DCC7;
  --accent-secondary: #C7EEE8;
  --primary-background: #FCFFFE;
  --secondary-background: #F1F1F1;
  --primary-text: #0B1816;
  --placeholder-text: #555;
  --error: #f88282;
  --success: #cc3808;
  --disabled: #d9d9d9;
  --skeleton: #f1f1f1;
  --third-accent: #9747FF;
  --error-background-color: #E8570B;
  --white: #fff;
  --gray: #555555;
  --label-color: #878787;

  --navbar-border-color: var(--primary-text);
  --navbar-background-color: var(--primary-background);
  --primary-text-color: var(--primary-text);
  --switch-unchecked-background: var(--primary-background);  
  --switch-unchecked-border: var(--accent-primary);
  --switch-checked-background: var(--accent-primary);
  --switch-checked-border: var(--primary-background);
  --btn-secondary-background: var(--primary-background);  
  --btn-secondary-hover-background: var(--secondary-background);
  --btn-primary-disabled-background: var(--secondary-background);
  --btn-primary-disabled-text: var(--placeholder-text);
  --btn-primary-disabled-border: var(--disabled);
  --character-background: var(--primary-background);
  --character-selected-background: var(--accent-primary);
  --radio-normal-background: var(--primary-background);
  --radio-selected-background: var(--primary-background);
  --radio-border-color: var(--accent-primary);
  --podcast-background: var(--primary-background);
  --podcast-border-color: var(--accent-secondary);
  --podcast-disabled-border-color: var(--secondary-background);
  --postcast-text-color: var(--primary-text);
  --card-background: var(--primary-background);
  --card-border-color: var(--accent-secondary);
  --input-background: var(--primary-background);
  --input-border-color: var(--primary-text);
  --input-focus-border-color: var(--third-accent);
  --input-text-color: var(--primary-text);
  --input-placeholder-color: var(--primary-text);
  --input-subdued-background: var(--secondary-background);
  --input-subdued-border-color: var(--disabled);
  --form-label-color: var(--primary-text);
  --walkthrough-modal-background: rgba(11, 24, 22, 0.5);
  --walkthrough-modal-content-background: var(--primary-background);
  --walkthrough-modal-content-text-color: var(--primary-text);
  --error: red;
  --white: #fff;
  --black: #000;
  --gray: #555555;
}

body.dark-mode {
  --primary-background: #555;
  --secondary-background: #373C3B;
  --navbar-border-color: #4BAFA0;
  --navbar-background-color: #2C302F;
  --primary-text-color: #FCFFFE;
  --accent-primary: #4BAFA0;
  --accent-secondary: #A0C8C3;
  --switch-unchecked-background: #112421;  
  --switch-unchecked-border: #4BAFA0;
  --switch-checked-background: #4BAFA0;
  --switch-checked-border: #4BAFA0;
  --btn-primary-disabled-background: #F1F1F1;
  --btn-primary-disabled-text: #555;
  --btn-primary-disabled-border: #F1F1F1;
  --btn-secondary-background: #2C302F;
  --btn-secondary-hover-background: #2C302F;
  --character-background: #2C302F;
  --character-selected-background: #4BAFA0;
  --radio-normal-background: #112421;
  --radio-selected-background: #112421;
  --radio-border-color: #4BAFA0;
  --podcast-background: #373C3B;
  --podcast-border-color: #4BAFA0;
  --podcast-disabled-border-color: #A0A0A0;  
  --postcast-text-color: #A0C8C3;
  --card-background: #373C3B;
  --card-border-color: #4BAFA0;
  --input-background: #2C302F;
  --input-border-color: #9E9E9E;
  --input-focus-border-color: #A0C8C3;
  --input-text-color: #FCFFFE;
  --input-placeholder-color: #717674;
  --form-label-color: #FCFFFE;
  --walkthrough-modal-background: rgba(11, 24, 22, 0.2);
  --walkthrough-modal-content-background: #292b2b;
  --walkthrough-modal-content-text-color: #FCFFFE;
  --third-accent: #9747FF;
  --error-background-color: #E8570B;
  --error: red;
  --white: #fff;
  --black: #000;
  --gray: #555555;
  --label-color: #878787;
}

/** texts **/
.UI-Main-Content, .UI-Main-Content.bold, .UI-Sub-Content, .UI-Sub-Content.bold, .UI-Small-Content, .UI-Small-Content.bold, .UI-Tiny-Content, .UI-Tiny-Content.bold {
  color: var(--primary-text-color);
}

/** switch **/

body.dark-mode .form-switch .form-check-input {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.4' fill='rgba(105, 220, 199, 1)'/></svg>");
}
body.dark-mode .form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.4' fill='rgba(105, 220, 199, 1)'/></svg>");
}
body.dark-mode .form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.4' fill='rgba(17, 36, 33, 1)'/></svg>");
}

/** icons and menu **/

body.dark-mode .menu-icon > .menu-icon-normal:not(dark-mode), 
body.dark-mode .menu-icon.selected > .menu-icon-selected:not(dark-mode) {
  display: none;
}

body.dark-mode .menu-icon > .menu-icon-normal.dark-mode {
  display: inline;
}

body.dark-mode .menu-icon.selected > .menu-icon-selected.dark-mode {
  display: inline;
}

body.dark-mode .menu-icon.selected > .menu-icon-normal.dark-mode {
  display: none;
}

body.dark-mode .impodible-icon-normal:not(.dark-mode), 
body.dark-mode .impodible-icon-selected:not(.dark-mode),
body.dark-mode .impodible-icon-disabled:not(.dark-mode) {
  display: none;
}

body.dark-mode .impodible-icon-normal.dark-mode, 
body.dark-mode .impodible-icon-selected.dark-mode,
body.dark-mode .impodible-icon-disabled.dark-mode {
  display: inline;
}

body.dark-mode .step-col:not(.dark-mode) {
  display: none;
}