/* stored in /css/dark.css */

:root {
  --base-hue: 240; /* Blue hue */
  --base-saturation: 80%;
  --base-lightness: 0%; /* this can be adjusted at runtime */
  --form-control-bg: #333;

  --bg-color: hsl(var(--base-hue), var(--base-saturation), var(--base-lightness));
  --primary-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 70%));
  --primary-hover-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 80%));

  --secondary-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 20%));
  --secondary-hover-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 30%));
  --sidenav-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 5%));

  --default-text: hsl(var(--base-hue), var(--base-saturation), 100%);
  --default-text-inv: hsl(var(--base-hue), var(--base-saturation), 0%);
}

.red-theme {
  --base-hue: 0; /* Red hue */
}

.blue-theme {
  --base-hue: 240; /* Blue hue */
}

.green-theme {
  --base-hue: 120; /* Green hue */
}

.grey-theme {
  --base-hue: 0; /* Grey hue */
  --base-saturation: 0%; /* Grey is less saturated */
}