/* stored in /css/light.css */

:root {
  --base-hue: 240; /* Blue hue */
  --base-saturation: 80%;
  --base-lightness: 100%; /* this can be adjusted at runtime */

  --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) - 60%));

  --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%));

  --border-color: hsl(var(--base-hue), var(--base-saturation), calc(var(--base-lightness) + 10%));

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

.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 */
}