:root {
  --white: white;
  --black: black;

  --inverse: black;

  --red: #c92c2c;
  --red-light: #FAE2E2;

  --blue: #4FB1EA;
  --blue-light: #E7F2FA;

  --orange: #F0B37E;
  --orange-light: #FFF2DB;

  /* --green: #5f8700; */
  --green: #00B32E;
  --green-light: #E6F9E6;

  --purple: #8451A1;


  --selection: #D6EDFF;
  --selection-color: none;

  --font-color: #3A4145;
  --post-color: #283838;
  --title-color: #2E2E2E;

  --border-list: #ebf2f6;
  --site-background: var(--white);
  --a-hover: #111111;
  --p-code-li-code: var(--red);
  --code-border: #E3EDF3;
  --code-background: #F7FAFB;
  --pre-border: #E3EDF3;
  --pre-background: #F7FAFB;
  --post-title-color: #383838;
  --button-border: transparent;
  --button-color: #2e2e2e;
  --tob-background: #1c1c1c;
}

[data-theme="dark"] {
  --selection-color: #000000;

  /* --green: #5fd700; */
  --purple: #CCCCFF;

  --inverse: white;

  --font-color: #e4e4e4;
  --post-color: #e4e4e4;
  --title-color: var(--white);

  --border-list: #383838;
  --site-background: #292A2D;
  --a-hover: var(--white);
  --p-code-li-code: var(--orange);
  --code-border: #4E4E4E;
  --code-background: #383838;
  --pre-border: #C6C6C6;
  --pre-background: #4E4E4E;
  --post-title-color: var(--white);
  --button-border: #dadada;
  --button-color: #dadada;
  --tob-background: #111111;
}