h1:focus-visible {
  outline: none; /* Avoid visible preselect on navigating to a new page or reloading */
}
:root {
  &.dark {
    color-scheme: dark;
  }
  &.light {
    color-scheme: light;
  }
}

:root {
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  color-scheme: light dark;
  --negative: #B05F6B;
  --positive: #28A745;
  --positive-background: #6EC294;
  --primary: light-dark(#E9E3DE, #000000);
  --secondary: light-dark(#E3C49B, #464545);
  --tertiary: light-dark(#A5937B, #DFDEDC);
  --quaternary: light-dark(#666161, #00ACAC);
  --quinary: light-dark(#AF9AC9, #A6A7A2);
  --border-color: light-dark(#000000, #dee2e6);

  background-color: light-dark(#F7F3EF, #696767);
  
  --wait: #B05F6B;
  --wait-background: #D1808B;
  --good: #D8D0C3;
  --this: #8A8F5A;
}
.wait {
  background: var(--wait-background);
  color: white;
}
.wait-border {
  border-color: var(--wait);
  border-width: 4px;
  border-style: solid;
}

.primary {
  background-color: var(--primary);
}

.secondary {
  background-color: var(--secondary);
}

.tertiary {
  background-color: var(--tertiary);
}

.quaternary {
  background-color: var(--quaternary);
}

.quinary {
  background-color: var(--quinary);
}

.outline {
  border: 1px solid var(--primary);
  color: var(--primary);
}

button {
  border: none;
  color: inherit;
  background: inherit;
  cursor: inherit;
}

.btn {
  border: none;
  color: inherit;
  background: inherit;
  cursor: inherit;
}

input {
  padding: 0.4rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

input:focus {
  outline: none;
  border-color: var(--primary);
}

input:disabled {
  background-color: var(--gray-light);
  cursor: not-allowed;
}

input.error {
  border-color: var(--negative);
}

input.success {
  border-color: #28a745;
}

input[type="text"],
input[type="number"] {
  
}

.negative {
  background: var(--negative);
  color: white;
}
.negative-border {
  border-color: var(--negative);
  border-width: 5px;
  border-style: solid;
}

.positive {
  background: var(--positive-background);
  color: white;
}
.positive-border {
  border-color: var(--positive);
  border-width: 5px;
  border-style: solid;
}

a {
  color: inherit;
  text-decoration: inherit;
}

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  overflow: hidden;
}