// Themes
@mixin theme-light {
  --gray-100: #fff5db;
  --gray-200: #f2e6c1;
  --gray-500: #e5dab7;

  --color-link: #29876e;
  --color-visited-link: #29876e;

  --body-background: #fffbf2;
  --body-font-color: #000;

  --icon-filter: none;

  --hint-color-info: #6bf;
  --hint-color-warning: #fd6;
  --hint-color-danger: #f66;
}

@mixin theme-dark {
  --gray-100: rgba(255, 255, 255, 0.1);
  --gray-200: rgba(255, 255, 255, 0.2);
  --gray-500: rgba(255, 255, 255, 0.5);

  --color-link: #80e5ca;
  --color-visited-link: #80e5ca;

  --body-background: #363f54;
  --body-font-color: #fff;

  --icon-filter: brightness(0) invert(1);

  --hint-color-info: #6bf;
  --hint-color-warning: #fd6;
  --hint-color-danger: #f66;
}