@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "./_variables.scss";
@import url("https://use.typekit.net/pqm5uiz.css");

@media (prefers-color-scheme: dark) {
  body {
    background-color: $hp-nearly_black;
    color: $hp-nearly_white;
  }
  .modal-body {
    background-color: $hp-nearly_black;
    color: $hp-nearly_white;
  }
  .modal-header,
  .modal-footer {
    background-color: $hp-dark_grey;
    color: $hp-nearly_white;
  }
  tbody td,
  tbody th {
    color: $hp-nearly_white;
  }
  a {
    color: $hp-dark_white;
  }

  .form-floating input,
  .form-floating select,
  .form-floating textarea {
    background-color: $hp-light_grey;
    color: $hp-nearly_white;
    border-color: $hp-dark_grey;

    option {
      color: $hp-nearly_white;
    }

    &:focus {
      background-color: $hp-light_grey;
      color: $hp-nearly_white;
    }
  }
}