/********************* 
 * Z5 Colors - Double Complementary 
 *
 * 4 Color Scheme
 * 
 * Double complementary combines two 
 * complementary pairs
 * 
 * HSL NOTES:
 * OLD hsl = hsl(val, val, val, .9)
 * NEW hsl = hsl(val val val / 9) 
 *
 *
 *
 */

 
:root {

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