/*
File: /css/dark.css
Version: 0.1: softer input bg-color and border-color
*/
:root {
  --base-hue: 240; /* Blue hue */
  --base-saturation: 80%;
  --base-lightness: 5%; /* softened from pure black for eye comfort */
  --form-control-bg-color: #1b1b1b;
  --form-control-border-color: #4c4c4c;

  --bg-color: hsl(var(--base-hue), var(--base-saturation), var(--base-lightness));
  --bg-wireframe-hover: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 10%));
  --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%));
  --nav-background-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 5%));
  --destructive-color: hsl(0, 100%, 40%);
  --destructive-color-hover: hsl(0, 100%, 50%);
  --success-color: hsl(120, 100%, 30%);
  --success-color-hover: hsl(120, 100%, 40%);
  --border-color: var(--default-text);

  --default-text: hsl(var(--base-hue), var(--base-saturation), 100%);
  --minor-text: #aaa; /*accompanies normal font but provides a contrast*/
  --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 */
}