/********************* 
 * Z5 Colors - Analogous
 *
 * 3 Color Scheme
 * 
 * Analogous colors are the neighbors of 
 * the primary color on the color wheel.
 * 
 * HSL NOTES:
 * OLD hsl = hsl(val, val, val, .9)
 * NEW hsl = hsl(val val val / 9) 
 *
 *
 *
 */
     

:root {

      /* Primary */
      --ana-primary-h: 217deg;
      --ana-primary-s: 89;
      --ana-primary-l: 61;
      --ana-primary: hsl(
          var(--ana-primary-h)
          var(--ana-primary-s)
          var(--ana-primary-l)
      );
  
      --ana-primary-light: hsl(
          var(--ana-primary-h)
          calc(var(--ana-primary-s) + 10)
          calc(var(--ana-primary-l) + 5)
      );
      --ana-primary-dark: hsl(
          var(--ana-primary-h)
          calc(var(--ana-primary-s) - 10)
          calc(var(--ana-primary-l) - 5)
      );
  
      /* Secondary */
      --ana-secondary-h: calc(var(--ana-primary-h) - 30deg + 360deg);
      --ana-secondary-s: var(--ana-primary-s);
      --ana-secondary-l: var(--ana-primary-l);
      --ana-secondary: hsl(
          var(--ana-secondary-h)
          var(--ana-secondary-s)
          var(--ana-secondary-l)
      );
  
      --ana-secondary-light: hsl(
          var(--ana-secondary-h)
          calc(var(--ana-secondary-s) + 10)
          calc(var(--ana-secondary-l) + 5)
      );
      --ana-secondary-dark: hsl(
          var(--ana-secondary-h)
          calc(var(--ana-secondary-s) - 10)
          calc(var(--ana-secondary-l) - 5)
      );
  
      /* Tertiary */
      --ana-tertiary-h: calc(var(--ana-primary-h) + 30deg);
      --ana-tertiary-s: var(--ana-primary-s);
      --ana-tertiary-l: var(--ana-primary-l);
      --ana-tertiary: hsl(
          var(--ana-tertiary-h)
          var(--ana-tertiary-s)
          var(--ana-tertiary-l)
      );
  
      --ana-tertiary-light: hsl(
          var(--ana-tertiary-h)
          calc(var(--ana-tertiary-s) + 10)
          calc(var(--ana-tertiary-l) + 5)
      );
      --ana-tertiary-dark: hsl(
          var(--ana-tertiary-h)
          calc(var(--ana-tertiary-s) - 10)
          calc(var(--ana-tertiary-l) - 5)
      );
  
      /* Action */
      --ana-action: var(--ana-tertiary);
      --ana-action-light: var(--ana-tertiary-light);
      --ana-action-dark: var(--ana-tertiary-dark);
  
      /* Dark */
      --ana-dark-h: 0deg;
      --ana-dark-s: 0;
      --ana-dark-l: 9;
      --ana-dark: hsl(
          var(--ana-dark-h)
          var(--ana-dark-s)
          var(--ana-dark-l)
      );
  
      --ana-dark-2: hsl(
          var(--ana-dark-h)
          var(--ana-dark-s)
          15
      );
      --ana-dark-3: hsl(
          var(--ana-dark-h)
          var(--ana-dark-s)
          25
      );
  
      --ana-dark-3-trans-20: hsl(
          var(--ana-dark-h)
          var(--ana-dark-s)
          25 / .8
      );
  
      /* Light */
      --ana-light-h: 0deg;
      --ana-light-s: 0;
      --ana-light-l: 100;
      --ana-light: hsl(
          var(--ana-light-h)
          var(--ana-light-s)
          var(--ana-light-l)
      );
  
      --ana-light-2: hsl(
          var(--ana-light-h)
          var(--ana-light-s)
          97
      );
      --ana-light-3: hsl(
          var(--ana-light-h)
          var(--ana-light-s)
          95
      );
  
      --ana-light-trans-20: hsl(
          var(--ana-light-h)
          var(--ana-light-s)
          var(--ana-light-l) / .8
      );
  }