/* Dark mode */
:root {
  --body-dark-color: #FFFFFF;
  --mode-dark-color: #6a747b30;
  --write-dark-color: #FFFFFF;
  --main-dark-color: #1B1E20;
  --secondary-dark-color: #C9D5DD;
  --tertiary-dark-color: #748088;
}

/* Light mode */
:root {
  --body-light-color: #FFFFFF;
  --mode-light-color: #1b1e200d;
  --write-light-color: #1B1E20;
  --main-light-color: #F8F9FA;
  --secondary-light-color: #E2E3E5;
  --tertiary-light-color: #CED4DA;
}

@mixin lighten() {
  --body-color: var(--body-light-color);
  --mode-color: var(--mode-light-color);
  --write-color: var(--write-light-color);
  --main-color: var(--main-light-color);
  --secondary-color: var(--secondary-light-color);
  --tertiary-color: var(--tertiary-light-color);
}

@mixin darken() {
  --body-color: var(--body-dark-color);
  --mode-color: var(--mode-dark-color);
  --write-color: var(--write-dark-color);
  --main-color: var(--main-dark-color);
  --secondary-color: var(--secondary-dark-color);
  --tertiary-color: var(--tertiary-dark-color);
}


body.dark {
  @include darken();
}
body.light {
  @include lighten();
}