:root {
/*----- Color Varibles Calculated in HSL -----*/
/*----- https://htmlcolors.com/hex-to-hsl ------*/

/*GLOBAL BORDER RADIUS*/
  --border-radius-default: 0px;

/*Primary Color*/
  --color-primary-h: 37;
  --color-primary-s: 60%;
  --color-primary-l: 68%;
/*Secondary Color*/
  --color-secondary-h: 37;
  --color-secondary-s: 60%;
  --color-secondary-l: 88%;
/*Contrast Color*/
  --color-contrast-h: 37;
  --color-contrast-s: 60%;
  --color-contrast-l: 68%;
/*Neutral Color*/
  --color-neutral-h: 71;
  --color-neutral-s: 7%;
  --color-neutral-l: 14%;


/* EDIT BELOW VARIABLES WITH CARE ==========*/

/* Threshold to swap text color from light to dark */
  --contrastThreshold: 60%;



  /*  Calculations Based on Lightness  */
  --lightTransform: 10%;
  --lighterTransform: 20%;
  --lightestTransform: 40%;
  --darkTransform: 15%;
  --darkerTransform: 25%;
  --darkestTransform: 35%;
  
  --color-neutral-light-l: calc(var(--color-neutral-l) + var(--lightTransform));
  --color-neutral-lighter-l: calc(var(--color-neutral-l) + var(--lighterTransform));
  --color-neutral-lightest-l: calc(var(--color-neutral-l) + var(--lightestTransform));

  --color-neutral-dark-l: calc(var(--color-neutral-l) - var(--darkTransform));
  --color-neutral-darker-l: calc(var(--color-neutral-l) - var(--darkerTransform));
  --color-neutral-darkest-l: calc(var(--color-neutral-l) - var(--darkestTransform));

  --color-primary-light-l: calc(var(--color-primary-l) + var(--lightTransform));
  --color-primary-lighter-l: calc(var(--color-primary-l) + var(--lighterTransform));

  --color-primary-dark-l: calc(var(--color-primary-l) - var(--darkTransform));
  --color-primary-darker-l: calc(var(--color-primary-l) - var(--darkerTransform));
  
  --color-primary: hsl(var(--color-primary-h),
                       var(--color-primary-s),
                       var(--color-primary-l));
  --color-primary-dark: hsl(var(--color-primary-h),
                       var(--color-primary-s),
                       var(--color-primary-dark-l));
  --color-primary-darker: hsl(var(--color-primary-h),
                       var(--color-primary-s),
                       var(--color-primary-darker-l));
  --color-primary-light: hsl(var(--color-primary-h),
                       var(--color-primary-s),
                       var(--color-primary-light-l));
  --color-primary-lighter: hsl(var(--color-primary-h),
                       var(--color-primary-s),
                       var(--color-primary-lighter-l));

  --color-secondary: hsl(var(--color-secondary-h),
                       var(--color-secondary-s),
                       var(--color-secondary-l));

  --color-contrast: hsl(var(--color-contrast-h),
                       var(--color-contrast-s),
                       var(--color-contrast-l));

  --color-neutral: hsl(var(--color-neutral-h),
                       var(--color-neutral-s),
                       var(--color-neutral-l));

  --color-neutral-dark:hsl(var(--color-neutral-h),
                       var(--color-neutral-s),
                       var(--color-neutral-dark-l));
  --color-neutral-darker:hsl(var(--color-secondary-h),
                       var(--color-neutral-s),
                       var(--color-neutral-darker-l));
  --color-neutral-darkest:hsl(var(--color-neutral-h),
                       var(--color-neutral-s),
                       var(--color-neutral-darkest-l));

  --color-neutral-light:hsl(var(--color-neutral-h),
                       var(--color-neutral-s),
                       var(--color-neutral-light-l));
  --color-neutral-lighter:hsl(var(--color-neutral-h),
                       var(--color-neutral-s),
                       var(--color-neutral-lighter-l));
  --color-neutral-lightest:hsl(var(--color-neutral-h),
                       var(--color-neutral-s),
                       var(--color-neutral-lightest-l));

/*  ALPHA Versions*/
  --color-secondary-90t: hsla(var(--color-secondary-h),
                       var(--color-secondary-s),
                       var(--color-secondary-l),
                       0.9);
  --color-primary-90t: hsla(var(--color-primary-h),
                       var(--color-primary-s),
                       var(--color-primary-l),
                       0.9);
  --color-secondary-80t: hsla(var(--color-secondary-h),
                       var(--color-secondary-s),
                       var(--color-secondary-l),
                       0.8);
  --color-primary-80t: hsla(var(--color-primary-h),
                       var(--color-primary-s),
                       var(--color-primary-l),
                       0.8);
  --color-secondary-70t: hsla(var(--color-secondary-h),
                       var(--color-secondary-s),
                       var(--color-secondary-l),
                       0.7);
  --color-primary-70t: hsla(var(--color-primary-h),
                       var(--color-primary-s),
                       var(--color-primary-l),
                       0.7);
  --color-secondary-50t: hsla(var(--color-secondary-h),
                       var(--color-secondary-s),
                       var(--color-secondary-l),
                       0.5);
  --color-primary-50t: hsla(var(--color-primary-h),
                       var(--color-primary-s),
                       var(--color-primary-l),
                       0.5);


  /*  Calculations Based on Hue  */
  --color-primary-complement: hsl(calc(var(--color-primary-h) + 180),
                          var(--color-primary-s),
                          var(--color-primary-l));
  --color-secondary-complement: hsl(calc(var(--color-secondary-h) + 180),
                          var(--color-secondary-s),
                          var(--color-secondary-l));
  --color-nuetral-complement: hsl(calc(var(--color-secondary-h) + 180),
                          var(--color-secondary-s),
                          var(--color-secondary-l));

/*color Switchers*/
--switch-primary: calc((var(--color-primary-l) - var(--contrastThreshold)) * -100);
--switch-secondary: calc((var(--color-secondary-l) - var(--contrastThreshold)) * -100);
--switch-contrast: calc((var(--color-contrast-l) - var(--contrastThreshold)) * -100);
--switch-neutral: calc((var(--color-neutral-l) - var(--contrastThreshold)) * -100);
}



/*END VARIABLE SETUP ==== */
/*============================*/
/*============================*/
/*============================*/
/*============================*/
/*============================*/
/*============================*/