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

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

/*Primary Color*/
  --color-primary-h: 220;
  --color-primary-s: 49%;
  --color-primary-l: 25;
/*Secondary Color*/
  --color-secondary-h: 199;
  --color-secondary-s: 49%;
  --color-secondary-l: 38;
/*Contrast Color*/
  --color-contrast-h: 24;
  --color-contrast-s: 74%;
  --color-contrast-l: 51;
/*Neutral Color*/
  --color-neutral-h: 223;
  --color-neutral-s: 6%;
  --color-neutral-l: 21;


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

/* Threshold to swap text color from light to dark (unitless for calc) */
  --contrastThreshold: 60;



  /*  Calculations Based on Lightness (unitless for calc compatibility)  */
  --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),
                       calc(var(--color-primary-l) * 1%));
  --color-primary-dark: hsl(var(--color-primary-h),
                       var(--color-primary-s),
                       calc(var(--color-primary-dark-l) * 1%));
  --color-primary-darker: hsl(var(--color-primary-h),
                       var(--color-primary-s),
                       calc(var(--color-primary-darker-l) * 1%));
  --color-primary-light: hsl(var(--color-primary-h),
                       var(--color-primary-s),
                       calc(var(--color-primary-light-l) * 1%));
  --color-primary-lighter: hsl(var(--color-primary-h),
                       var(--color-primary-s),
                       calc(var(--color-primary-lighter-l) * 1%));

  --color-secondary: hsl(var(--color-secondary-h),
                       var(--color-secondary-s),
                       calc(var(--color-secondary-l) * 1%));

  --color-contrast: hsl(var(--color-contrast-h),
                       var(--color-contrast-s),
                       calc(var(--color-contrast-l) * 1%));

  --color-neutral: hsl(var(--color-neutral-h),
                       var(--color-neutral-s),
                       calc(var(--color-neutral-l) * 1%));

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

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

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


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

/*color Switchers - using clamp to snap to 0% (black) or 100% (white)
  How it works: multiply difference by large number to push past clamp bounds
  - If background lightness > threshold: result is negative, clamps to 0% (black text)
  - If background lightness < threshold: result is positive, clamps to 100% (white text)
  Note: multiply by 1% at the end to convert unitless number to percentage
*/
--switch-primary: clamp(0%, calc((var(--contrastThreshold) - var(--color-primary-l)) * 10 * 1%), 100%);
--switch-secondary: clamp(0%, calc((var(--contrastThreshold) - var(--color-secondary-l)) * 10 * 1%), 100%);
--switch-contrast: clamp(0%, calc((var(--contrastThreshold) - var(--color-contrast-l)) * 10 * 1%), 100%);
--switch-neutral: clamp(0%, calc((var(--contrastThreshold) - var(--color-neutral-l)) * 10 * 1%), 100%);

/* Switch variants for lighter/darker shades */
--switch-neutral-light: clamp(0%, calc((var(--contrastThreshold) - var(--color-neutral-light-l)) * 10 * 1%), 100%);
--switch-neutral-lighter: clamp(0%, calc((var(--contrastThreshold) - var(--color-neutral-lighter-l)) * 10 * 1%), 100%);
--switch-neutral-lightest: clamp(0%, calc((var(--contrastThreshold) - var(--color-neutral-lightest-l)) * 10 * 1%), 100%);
--switch-neutral-dark: clamp(0%, calc((var(--contrastThreshold) - var(--color-neutral-dark-l)) * 10 * 1%), 100%);
--switch-neutral-darker: clamp(0%, calc((var(--contrastThreshold) - var(--color-neutral-darker-l)) * 10 * 1%), 100%);
--switch-neutral-darkest: clamp(0%, calc((var(--contrastThreshold) - var(--color-neutral-darkest-l)) * 10 * 1%), 100%);

--switch-primary-light: clamp(0%, calc((var(--contrastThreshold) - var(--color-primary-light-l)) * 10 * 1%), 100%);
--switch-primary-lighter: clamp(0%, calc((var(--contrastThreshold) - var(--color-primary-lighter-l)) * 10 * 1%), 100%);
--switch-primary-dark: clamp(0%, calc((var(--contrastThreshold) - var(--color-primary-dark-l)) * 10 * 1%), 100%);
--switch-primary-darker: clamp(0%, calc((var(--contrastThreshold) - var(--color-primary-darker-l)) * 10 * 1%), 100%);
}



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