/*
File: /css/light.css
Version: 0.1: softer input bg-color and border-color
*/

:root {
  --base-hue: 240; /* Blue hue */
  --base-saturation: 80%;
  --base-lightness: 100%; /* this can be adjusted at runtime */
  --form-control-bg-color: #f4f4f4;
  --form-control-border-color: #d6d6d6;

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

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