:root {
  --white: #fff;
  --black: #121212;
  --primary-color: #19324c;
  --primary-button-color: var(--primary-color);
  --primary-button-text-color: var(--text-color-white);
  --primary-button-text-color-hover: var(--text-color);
  --red: #db504a;
  --form-item-background: #eee;
  --background-color: var(--white);
  --text-color: var(--black);
  --text-color-white: var(--white);
  --menu-item-color: var(--primary-color);
  --menu-item-color-inverse: var(--white);
  --article-background: #f7f3f2;
  --article-background-darker: #ebe8e6;
  --article-shadow-color: #19324c33;
  --success-background-color: #4c9f701f;
  --success-color: #4c9f70;
  --information-background-color: #2c87c91f;
  --information-color: #2c87c9;
  --error-background-color: #db504a1f;
  --error-color: var(--red);
  --disabled-color: #888;
  --modal-background-color: rgb(255 255 255 / 80%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --white: #121212;
    --black: #cfcfcf;
    --menu-item-color-inverse: var(--text-color);
    --article-background: #10181a;
    --article-background-darker: #080c0d;
    --article-shadow-color: #0f1e2e33;
    --background-color: #000;
    --primary-color: #0f1e2e;
    --primary-button-color: var(--text-color);
    --primary-button-text-color: var(--text-color);
    --primary-button-text-color-hover: var(--primary-color);
    --text-color: #cfcfcf;
    --text-color-white: var(--black);
    --red: #b52924;
    --form-item-background: #222;
    --menu-item-color: var(--text-color);
    --success-background-color: #2e60441f;
    --success-color: #2e6044;
    --error-background-color: #771b1854;
    --error-color: var(--red);
    --disabled-color: #616161;
    --modal-background-color: rgb(0 0 0 / 80%);
  }
}