:root {
    /* 
        Global CSS Tokens by RitZz
        Generated on 23.04.2025 | 16:45:52 | v2.34
        Contains Classes and Variables
    */
  
  
    /* Colors */ 
  
    /* Primary HSLA Values */
    --primary-h: 200;
    --primary-s: 70%;
    --primary-l: 25%;
    --primary-a: 1;
  
    /* Secondary HSLA Values */
    --secondary-h: 140;
    --secondary-s: 10%;
    --secondary-l: 6%;
    --secondary-a: 1;

    /* Action HSLA Values */
    --action-h: 140;
    --action-s: 50%;
    --action-l: 50%;
    --action-a: 1;

    /* Base HSLA Values */
    --base-h: 140;
    --base-s: 30%;
    --base-l: 95%;
    --base-a: 1;

    /* Generic Colors */ 
    --white: hsl(0, 0%, 100%); 
    --black: hsl(0, 0%, 0%);
    --transparent: hsl(0, 0%, 0%, 0); 
    --success: hsl(136, 95%, 56%);
    --danger: hsl(359, 74%, 60%);
    --warning: hsl(48, 97%, 58%); 
    --information: hsl(180, 46%, 44%);

    /* Font Sizes */
    --h1: clamp(2.4rem, 2rem + 2vw, 7rem);
    --h2: clamp(2rem, 1.75rem + 1.25vw, 3rem);
    --h3: clamp(1.8rem, 1.75rem + 0.25vw, 2rem);
    --h4: clamp(2.5rem, calc(0.65vw + 2.29rem), 3.2rem);
    --h5: clamp(2rem, calc(0.37vw + 1.88rem), 2.4rem);
    --h6: clamp(1.6rem, calc(0.19vw + 1.54rem), 1.8rem);
    --body-xl: clamp(2rem, calc(0.37vw + 1.88rem), 2.4rem);
    --body:clamp(1.6rem, 1.55rem + 0.25vw, 1.8rem);
    --body-s: clamp(1.4rem, 1.35rem + 0.25vw, 1.6rem);
    --body-xs: clamp(1.02rem, calc(-0.01vw + 1.03rem), 1.01rem);

    /* Spacing */
    --space-4xs: clamp(0.52rem, calc(-0.03vw + 0.53rem), 0.49rem);
    --space-3xs: clamp(0.66rem, calc(0.04vw + 0.64rem), 0.7rem);
    --space-2xs: clamp(0.82rem, calc(0.16vw + 0.77rem), 0.99rem);
    --space-xs: clamp(1.02rem, calc(0.35vw + 0.91rem), 1.4rem);
    --space-s: clamp(1.28rem, calc(0.65vw + 1.07rem), 1.98rem);
    --space-m: clamp(1.6rem, calc(1.11vw + 1.24rem), 2.8rem);
    --space-l: clamp(2rem, calc(1.81vw + 1.42rem), 3.96rem);
    --space-xl: clamp(2.5rem, calc(2.87vw + 1.58rem), 5.6rem);
    --space-2xl: clamp(3.13rem, calc(4.44vw + 1.71rem), 7.92rem);
    --space-3xl: clamp(3.91rem, calc(6.75vw + 1.75rem), 11.19rem);
    --space-4xl: clamp(4.88rem, calc(10.13vw + 1.64rem), 15.83rem);

    /* Radius */ 
    --radius-xs: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem);
    --radius-s: clamp(0.6rem, calc(-0.19vw + 0.86rem), 0.8rem);
    --radius-m: clamp(1rem, calc(-0.19vw + 1.26rem), 1.2rem);
    --radius-l: clamp(1.6rem, calc(-0.37vw + 2.12rem), 2rem);
    --radius-xl: clamp(2.6rem, calc(-0.56vw + 3.38rem), 3.2rem);
    --radius-full: 999rem;

    /* BEM based Variables */
    --section-pad-block: clamp(1rem, 4.688vw + -0.5rem, 7rem);
    --section-pad-inline: clamp(2rem, 1.25rem + 3.75vw, 5rem);
    --header-pad-block: clamp(3rem, -1.25rem + 21.25vw, 20rem));
    --header-pad-inline: clamp(2rem, 1.25rem + 3.75vw, 5rem);
    --container-width: clamp(32rem, 100vw + 0rem, 136.6rem);
    --grid-gap: clamp(2rem, 1.2727rem + 3.6364vw, 4rem);
    --container-gap: clamp(1.6rem, 1.5rem + 0.5vw, 2rem);
    --content-gap: clamp(1.6rem, calc(1.11vw + 1.24rem), 2.8rem);

    /* Primary Color Variations*/
    --primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / var(--primary-a)); /* References the primary color */
    --primary-comp: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / var(--primary-a)); /* References the primary complimentary color */
    --primary-hover: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / var(--primary-a)); /*References the primary hover color */

    --primary-trans-10: hsl(var(--primary-h), var(--primary-s), var(--primary-l), calc(var(--primary-a) * 0.1)); /* References the primary color at 10% opacity. */
    --primary-trans-20: hsl(var(--primary-h), var(--primary-s), var(--primary-l), calc(var(--primary-a) * 0.2)); /* References the primary color at 20% opacity. */
    --primary-trans-40: hsl(var(--primary-h), var(--primary-s), var(--primary-l), calc(var(--primary-a) * 0.4)); /* References the primary color at 40% opacity. */
    --primary-trans-60: hsl(var(--primary-h), var(--primary-s), var(--primary-l), calc(var(--primary-a) * 0.6)); /* References the primary color at 60% opacity. */
    --primary-trans-80: hsl(var(--primary-h), var(--primary-s), var(--primary-l), calc(var(--primary-a) * 0.8)); /* References the primary color at 80% opacity. */
    --primary-trans-90: hsl(var(--primary-h), var(--primary-s), var(--primary-l), calc(var(--primary-a) * 0.9)); /* References the primary color at 90% opacity. */

    /* Lightness Variations*/
    --primary-ultra-light: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 40%)); /* References the Primary color ultra light version*/
    --primary-ultra-light-trans-10: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.1)); /* References the Primary color ultra light version at 10% opacity*/
    --primary-ultra-light-trans-20: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.2)); /* References the Primary color ultra light version at 20% opacity*/
    --primary-ultra-light-trans-40: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.4)); /* References the Primary color ultra light version at 40% opacity*/
    --primary-ultra-light-trans-60: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.6)); /* References the Primary color ultra light version at 60% opacity*/
    --primary-ultra-light-trans-80: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.8)); /* References the Primary color ultra light version at 80% opacity*/
    --primary-ultra-light-trans-90: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.9)); /* References the Primary color ultra light version at 90% opacity*/

    --primary-light: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 20%)); /* References the Primary color light version*/
    --primary-light-trans-10: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.1)); /* References the Primary color light version at 10% opacity*/
    --primary-light-trans-20: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.2)); /* References the Primary color light version at 20% opacity*/
    --primary-light-trans-40: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.4)); /* References the Primary color light version at 40% opacity*/
    --primary-light-trans-60: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.6)); /* References the Primary color light version at 60% opacity*/
    --primary-light-trans-80: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.8)); /* References the Primary color light version at 80% opacity*/
    --primary-light-trans-90: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.9)); /* References the Primary color light version at 90% opacity*/

    --primary-medium: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%)); /* References the Primary color medium version*/
    --primary-medium-trans-10: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.1)); /* References the Primary color medium version at 10% opacity*/
    --primary-medium-trans-20: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.2)); /* References the Primary color medium version at 20% opacity*/
    --primary-medium-trans-40: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.4)); /* References the Primary color medium version at 40% opacity*/
    --primary-medium-trans-60: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.6)); /* References the Primary color medium version at 60% opacity*/
    --primary-medium-trans-80: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.8)); /* References the Primary color medium version at 80% opacity*/
    --primary-medium-trans-90: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.9)); /* References the Primary color medium version at 90% opacity*/
 
    --primary-dark: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 20%)); /* References the Primary color dark version*/
    --primary-dark-trans-10: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.1)); /* References the Primary color dark version at 10% opacity*/
    --primary-dark-trans-20: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.2)); /* References the Primary color dark version at 20% opacity*/
    --primary-dark-trans-40: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.4)); /* References the Primary color dark version at 40% opacity*/
    --primary-dark-trans-60: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.6)); /* References the Primary color dark version at 60% opacity*/
    --primary-dark-trans-80: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.8)); /* References the Primary color dark version at 80% opacity*/
    --primary-dark-trans-90: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.9)); /* References the Primary color dark version at 90% opacity*/

    --primary-ultra-dark: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 40%)); /* References the Primary color ultra-dark version*/
    --primary-ultra-dark-trans-10: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.1)); /* References the Primary color ultra-dark version at 10% opacity*/
    --primary-ultra-dark-trans-20: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.2)); /* References the Primary color ultra-dark version at 20% opacity*/
    --primary-ultra-dark-trans-40: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.4)); /* References the Primary color ultra-dark version at 40% opacity*/
    --primary-ultra-dark-trans-60: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.6)); /* References the Primary color ultra-dark version at 60% opacity*/
    --primary-ultra-dark-trans-80: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.8)); /* References the Primary color ultra-dark version at 80% opacity*/
    --primary-ultra-dark-trans-90: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.9)); /* References the Primary color ultra-dark version at 90% opacity*/

    /* Saturation variation */
    --primary-ultra-muted: hsl(var(--primary-h), calc(var(--primary-s) - 40%), var(--primary-l)); /* References the Primary color ultra-muted version */
    --primary-ultra-muted-trans-10: hsl(var(--primary-h), calc(var(--primary-s) - 40%), var(--primary-l), calc(var(--primary-a) * 0.1)); /* References the Primary color ultra-muted version at 10% opacity */
    --primary-ultra-muted-trans-20: hsl(var(--primary-h), calc(var(--primary-s) - 40%), var(--primary-l), calc(var(--primary-a) * 0.2)); /* References the Primary color ultra-muted version at 20% opacity */
    --primary-ultra-muted-trans-40: hsl(var(--primary-h), calc(var(--primary-s) - 40%), var(--primary-l), calc(var(--primary-a) * 0.4)); /* References the Primary color ultra-muted version at 40% opacity */
    --primary-ultra-muted-trans-60: hsl(var(--primary-h), calc(var(--primary-s) - 40%), var(--primary-l), calc(var(--primary-a) * 0.6)); /* References the Primary color ultra-muted version at 60% opacity */
    --primary-ultra-muted-trans-80: hsl(var(--primary-h), calc(var(--primary-s) - 40%), var(--primary-l), calc(var(--primary-a) * 0.8)); /* References the Primary color ultra-muted version at 80% opacity */
    --primary-ultra-muted-trans-90: hsl(var(--primary-h), calc(var(--primary-s) - 40%), var(--primary-l), calc(var(--primary-a) * 0.9)); /* References the Primary color ultra-muted version at 90% opacity */

    --primary-muted: hsl(var(--primary-h), calc(var(--primary-s) - 20%), var(--primary-l)); /* References the Primary color muted version */
    --primary-muted-trans-10: hsl(var(--primary-h), calc(var(--primary-s) - 20%), var(--primary-l), calc(var(--primary-a) * 0.1)); /* References the Primary color muted version at 10% opacity */
    --primary-muted-trans-20: hsl(var(--primary-h), calc(var(--primary-s) - 20%), var(--primary-l), calc(var(--primary-a) * 0.2)); /* References the Primary color muted version at 20% opacity */
    --primary-muted-trans-40: hsl(var(--primary-h), calc(var(--primary-s) - 20%), var(--primary-l), calc(var(--primary-a) * 0.4)); /* References the Primary color muted version at 40% opacity */
    --primary-muted-trans-60: hsl(var(--primary-h), calc(var(--primary-s) - 20%), var(--primary-l), calc(var(--primary-a) * 0.6)); /* References the Primary color muted version at 60% opacity */
    --primary-muted-trans-80: hsl(var(--primary-h), calc(var(--primary-s) - 20%), var(--primary-l), calc(var(--primary-a) * 0.8)); /* References the Primary color muted version at 80% opacity */
    --primary-muted-trans-90: hsl(var(--primary-h), calc(var(--primary-s) - 20%), var(--primary-l), calc(var(--primary-a) * 0.9)); /* References the Primary color muted version at 90% opacity */

    --primary-strong: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) - 4%)); /* References the Primary color strong version */
    --primary-strong-trans-10: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) - 4%), calc(var(--primary-a) * 0.1)); /* References the Primary color strong version at 10% opacity */
    --primary-strong-trans-20: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) - 4%), calc(var(--primary-a) * 0.2)); /* References the Primary color strong version at 20% opacity */
    --primary-strong-trans-40: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) - 4%), calc(var(--primary-a) * 0.4)); /* References the Primary color strong version at 40% opacity */
    --primary-strong-trans-60: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) - 4%), calc(var(--primary-a) * 0.6)); /* References the Primary color strong version at 60% opacity */
    --primary-strong-trans-80: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) - 4%), calc(var(--primary-a) * 0.8)); /* References the Primary color strong version at 80% opacity */
    --primary-strong-trans-90: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) - 4%), calc(var(--primary-a) * 0.9)); /* References the Primary color strong version at 90% opacity */

    --primary-ultra-strong: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 4%)); /* References the Primary color ultra-strong version */
    --primary-ultra-strong-trans-10: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 4%), calc(var(--primary-a) * 0.1)); /* References the Primary color ultra-strong version at 10% opacity */
    --primary-ultra-strong-trans-20: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 4%), calc(var(--primary-a) * 0.2)); /* References the Primary color ultra-strong version at 20% opacity */
    --primary-ultra-strong-trans-40: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 4%), calc(var(--primary-a) * 0.4)); /* References the Primary color ultra-strong version at 40% opacity */
    --primary-ultra-strong-trans-60: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 4%), calc(var(--primary-a) * 0.6)); /* References the Primary color ultra-strong version at 60% opacity */
    --primary-ultra-strong-trans-80: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 4%), calc(var(--primary-a) * 0.8)); /* References the Primary color ultra-strong version at 80% opacity */
    --primary-ultra-strong-trans-90: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 4%), calc(var(--primary-a) * 0.9)); /* References the Primary color ultra-strong version at 90% opacity */

    /* Combined Lightness + Saturation Variations */
    --primary-ultra-light-ultra-muted: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 40%)); /* References the Primary color ultra-light + ultra-muted version */
    --primary-ultra-light-ultra-muted-trans-10: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.10)); /* Primary ultra-light + ultra-muted at 10% opacity */
    --primary-ultra-light-ultra-muted-trans-20: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.20)); /* Primary ultra-light + ultra-muted at 20% opacity */
    --primary-ultra-light-ultra-muted-trans-40: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.40)); /* Primary ultra-light + ultra-muted at 40% opacity */
    --primary-ultra-light-ultra-muted-trans-60: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.60)); /* Primary ultra-light + ultra-muted at 60% opacity */
    --primary-ultra-light-ultra-muted-trans-80: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.80)); /* Primary ultra-light + ultra-muted at 80% opacity */
    --primary-ultra-light-ultra-muted-trans-90: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.90)); /* Primary ultra-light + ultra-muted at 90% opacity */
    --primary-ultra-light-muted: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 40%)); /* References the Primary color ultra-light + muted version */
    --primary-ultra-light-muted-trans-10: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.10)); /* Primary ultra-light + muted at 10% opacity */
    --primary-ultra-light-muted-trans-20: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.20)); /* Primary ultra-light + muted at 20% opacity */
    --primary-ultra-light-muted-trans-40: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.40)); /* Primary ultra-light + muted at 40% opacity */
    --primary-ultra-light-muted-trans-60: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.60)); /* Primary ultra-light + muted at 60% opacity */
    --primary-ultra-light-muted-trans-80: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.80)); /* Primary ultra-light + muted at 80% opacity */
    --primary-ultra-light-muted-trans-90: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.90)); /* Primary ultra-light + muted at 90% opacity */
    --primary-ultra-light-strong: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) + 40%)); /* References the Primary color ultra-light + strong version */
    --primary-ultra-light-strong-trans-10: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.10)); /* Primary ultra-light + strong at 10% opacity */
    --primary-ultra-light-strong-trans-20: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.20)); /* Primary ultra-light + strong at 20% opacity */
    --primary-ultra-light-strong-trans-40: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.40)); /* Primary ultra-light + strong at 40% opacity */
    --primary-ultra-light-strong-trans-60: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.60)); /* Primary ultra-light + strong at 60% opacity */
    --primary-ultra-light-strong-trans-80: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.80)); /* Primary ultra-light + strong at 80% opacity */
    --primary-ultra-light-strong-trans-90: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.90)); /* Primary ultra-light + strong at 90% opacity */
    --primary-ultra-light-ultra-strong: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) + 40%)); /* References the Primary color ultra-light + ultra-strong version */
    --primary-ultra-light-ultra-strong-trans-10: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.10)); /* Primary ultra-light + ultra-strong at 10% opacity */
    --primary-ultra-light-ultra-strong-trans-20: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.20)); /* Primary ultra-light + ultra-strong at 20% opacity */
    --primary-ultra-light-ultra-strong-trans-40: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.40)); /* Primary ultra-light + ultra-strong at 40% opacity */
    --primary-ultra-light-ultra-strong-trans-60: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.60)); /* Primary ultra-light + ultra-strong at 60% opacity */
    --primary-ultra-light-ultra-strong-trans-80: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.80)); /* Primary ultra-light + ultra-strong at 80% opacity */
    --primary-ultra-light-ultra-strong-trans-90: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) + 40%), calc(var(--primary-a) * 0.90)); /* Primary ultra-light + ultra-strong at 90% opacity */

    --primary-light-ultra-muted: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 20%)); /* References the Primary color light + ultra-muted version */
    --primary-light-ultra-muted-trans-10: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.10)); /* Primary light + ultra-muted at 10% opacity */
    --primary-light-ultra-muted-trans-20: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.20)); /* Primary light + ultra-muted at 20% opacity */
    --primary-light-ultra-muted-trans-40: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.40)); /* Primary light + ultra-muted at 40% opacity */
    --primary-light-ultra-muted-trans-60: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.60)); /* Primary light + ultra-muted at 60% opacity */
    --primary-light-ultra-muted-trans-80: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.80)); /* Primary light + ultra-muted at 80% opacity */
    --primary-light-ultra-muted-trans-90: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.90)); /* Primary light + ultra-muted at 90% opacity */
    --primary-light-muted: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 20%)); /* References the Primary color light + muted version */
    --primary-light-muted-trans-10: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.10)); /* Primary light + muted at 10% opacity */
    --primary-light-muted-trans-20: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.20)); /* Primary light + muted at 20% opacity */
    --primary-light-muted-trans-40: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.40)); /* Primary light + muted at 40% opacity */
    --primary-light-muted-trans-60: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.60)); /* Primary light + muted at 60% opacity */
    --primary-light-muted-trans-80: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.80)); /* Primary light + muted at 80% opacity */
    --primary-light-muted-trans-90: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 20%), calc(var(--primary-a) * 0.90)); /* Primary light + muted at 90% opacity */
    --primary-light-strong: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 20%)); /* References the Primary color light + strong version */
    --primary-light-strong-trans-10: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.10)); /* Primary light + strong at 10% opacity */
    --primary-light-strong-trans-20: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.20)); /* Primary light + strong at 20% opacity */
    --primary-light-strong-trans-40: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.40)); /* Primary light + strong at 40% opacity */
    --primary-light-strong-trans-60: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.60)); /* Primary light + strong at 60% opacity */
    --primary-light-strong-trans-80: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.80)); /* Primary light + strong at 80% opacity */
    --primary-light-strong-trans-90: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.90)); /* Primary light + strong at 90% opacity */
    --primary-light-ultra-strong: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) - 68%)); /* References the Primary color light + ultra-strong version */
    --primary-light-ultra-strong-trans-10: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) - 68%), calc(var(--primary-a) * 0.10)); /* Primary light + ultra-strong at 10% opacity */
    --primary-light-ultra-strong-trans-20: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) - 68%), calc(var(--primary-a) * 0.20)); /* Primary light + ultra-strong at 20% opacity */
    --primary-light-ultra-strong-trans-40: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) - 68%), calc(var(--primary-a) * 0.40)); /* Primary light + ultra-strong at 40% opacity */
    --primary-light-ultra-strong-trans-60: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) - 68%), calc(var(--primary-a) * 0.60)); /* Primary light + ultra-strong at 60% opacity */
    --primary-light-ultra-strong-trans-80: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) - 68%), calc(var(--primary-a) * 0.80)); /* Primary light + ultra-strong at 80% opacity */
    --primary-light-ultra-strong-trans-90: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) - 68%), calc(var(--primary-a) * 0.90)); /* Primary light + ultra-strong at 90% opacity */

    --primary-medium-ultra-muted: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 10%)); /* References the Primary color medium + ultra-muted version */
    --primary-medium-ultra-muted-trans-10: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.10)); /* Primary medium + ultra-muted at 10% opacity */
    --primary-medium-ultra-muted-trans-20: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.20)); /* Primary medium + ultra-muted at 20% opacity */
    --primary-medium-ultra-muted-trans-40: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.40)); /* Primary medium + ultra-muted at 40% opacity */
    --primary-medium-ultra-muted-trans-60: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.60)); /* Primary medium + ultra-muted at 60% opacity */
    --primary-medium-ultra-muted-trans-80: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.80)); /* Primary medium + ultra-muted at 80% opacity */
    --primary-medium-ultra-muted-trans-90: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.90)); /* Primary medium + ultra-muted at 90% opacity */
    --primary-medium-muted: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 10%)); /* References the Primary color medium + muted version */
    --primary-medium-muted-trans-10: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.10)); /* Primary medium + muted at 10% opacity */
    --primary-medium-muted-trans-20: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.20)); /* Primary medium + muted at 20% opacity */
    --primary-medium-muted-trans-40: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.40)); /* Primary medium + muted at 40% opacity */
    --primary-medium-muted-trans-60: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.60)); /* Primary medium + muted at 60% opacity */
    --primary-medium-muted-trans-80: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.80)); /* Primary medium + muted at 80% opacity */
    --primary-medium-muted-trans-90: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.90)); /* Primary medium + muted at 90% opacity */
    --primary-medium-strong: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 30%)); /* References the Primary color medium + strong version */
    --primary-medium-strong-trans-10: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 30%), calc(var(--primary-a) * 0.10)); /* Primary medium + strong at 10% opacity */
    --primary-medium-strong-trans-20: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 30%), calc(var(--primary-a) * 0.20)); /* Primary medium + strong at 20% opacity */
    --primary-medium-strong-trans-40: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 30%), calc(var(--primary-a) * 0.40)); /* Primary medium + strong at 40% opacity */
    --primary-medium-strong-trans-60: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 30%), calc(var(--primary-a) * 0.60)); /* Primary medium + strong at 60% opacity */
    --primary-medium-strong-trans-80: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 30%), calc(var(--primary-a) * 0.80)); /* Primary medium + strong at 80% opacity */
    --primary-medium-strong-trans-90: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 30%), calc(var(--primary-a) * 0.90)); /* Primary medium + strong at 90% opacity */
    --primary-medium-ultra-strong: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) + 10%)); /* References the Primary color medium + ultra-strong version */
    --primary-medium-ultra-strong-trans-10: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.10)); /* Primary medium + ultra-strong at 10% opacity */
    --primary-medium-ultra-strong-trans-20: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.20)); /* Primary medium + ultra-strong at 20% opacity */
    --primary-medium-ultra-strong-trans-40: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.40)); /* Primary medium + ultra-strong at 40% opacity */
    --primary-medium-ultra-strong-trans-60: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.60)); /* Primary medium + ultra-strong at 60% opacity */
    --primary-medium-ultra-strong-trans-80: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.80)); /* Primary medium + ultra-strong at 80% opacity */
    --primary-medium-ultra-strong-trans-90: hsl(var(--primary-h), calc(var(--primary-s) + 40%), calc(var(--primary-l) + 10%), calc(var(--primary-a) * 0.90)); /* Primary medium + ultra-strong at 90% opacity */

    --primary-dark-ultra-muted: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) - 20%)); /* References the Primary color dark + ultra-muted version */
    --primary-dark-ultra-muted-trans-10: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.10)); /* Primary dark + ultra-muted at 10% opacity */
    --primary-dark-ultra-muted-trans-20: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.20)); /* Primary dark + ultra-muted at 20% opacity */
    --primary-dark-ultra-muted-trans-40: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.40)); /* Primary dark + ultra-muted at 40% opacity */
    --primary-dark-ultra-muted-trans-60: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.60)); /* Primary dark + ultra-muted at 60% opacity */
    --primary-dark-ultra-muted-trans-80: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.80)); /* Primary dark + ultra-muted at 80% opacity */
    --primary-dark-ultra-muted-trans-90: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.90)); /* Primary dark + ultra-muted at 90% opacity */
    --primary-dark-muted: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) - 20%)); /* References the Primary color dark + muted version */
    --primary-dark-muted-trans-10: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.10)); /* Primary dark + muted at 10% opacity */
    --primary-dark-muted-trans-20: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.20)); /* Primary dark + muted at 20% opacity */
    --primary-dark-muted-trans-40: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.40)); /* Primary dark + muted at 40% opacity */
    --primary-dark-muted-trans-60: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.60)); /* Primary dark + muted at 60% opacity */
    --primary-dark-muted-trans-80: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.80)); /* Primary dark + muted at 80% opacity */
    --primary-dark-muted-trans-90: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.90)); /* Primary dark + muted at 90% opacity */
    --primary-dark-strong: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) - 20%)); /* References the Primary color dark + strong version */
    --primary-dark-strong-trans-10: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.10)); /* Primary dark + strong at 10% opacity */
    --primary-dark-strong-trans-20: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.20)); /* Primary dark + strong at 20% opacity */
    --primary-dark-strong-trans-40: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.40)); /* Primary dark + strong at 40% opacity */
    --primary-dark-strong-trans-60: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.60)); /* Primary dark + strong at 60% opacity */
    --primary-dark-strong-trans-80: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.80)); /* Primary dark + strong at 80% opacity */
    --primary-dark-strong-trans-90: hsl(var(--primary-h), calc(var(--primary-s) + 20%), calc(var(--primary-l) - 20%), calc(var(--primary-a) * 0.90)); /* Primary dark + strong at 90% opacity */
    --primary-dark-ultra-strong: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 21%)); /* References the Primary color dark + ultra-strong version */
    --primary-dark-ultra-strong-trans-10: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 21%), calc(var(--primary-a) * 0.10)); /* Primary dark + ultra-strong at 10% opacity */
    --primary-dark-ultra-strong-trans-20: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 21%), calc(var(--primary-a) * 0.20)); /* Primary dark + ultra-strong at 20% opacity */
    --primary-dark-ultra-strong-trans-40: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 21%), calc(var(--primary-a) * 0.40)); /* Primary dark + ultra-strong at 40% opacity */
    --primary-dark-ultra-strong-trans-60: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 21%), calc(var(--primary-a) * 0.60)); /* Primary dark + ultra-strong at 60% opacity */
    --primary-dark-ultra-strong-trans-80: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 21%), calc(var(--primary-a) * 0.80)); /* Primary dark + ultra-strong at 80% opacity */
    --primary-dark-ultra-strong-trans-90: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 21%), calc(var(--primary-a) * 0.90)); /* Primary dark + ultra-strong at 90% opacity */

    --primary-ultra-dark-ultra-muted: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) - 40%)); /* References the Primary color ultra-dark + ultra-muted version */
    --primary-ultra-dark-ultra-muted-trans-10: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.10)); /* Primary ultra-dark + ultra-muted at 10% opacity */
    --primary-ultra-dark-ultra-muted-trans-20: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.20)); /* Primary ultra-dark + ultra-muted at 20% opacity */
    --primary-ultra-dark-ultra-muted-trans-40: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.40)); /* Primary ultra-dark + ultra-muted at 40% opacity */
    --primary-ult5ra-dark-ultra-muted-trans-60: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.60)); /* Primary ultra-dark + ultra-muted at 60% opacity */
    --primary-ultra-dark-ultra-muted-trans-80: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.80)); /* Primary ultra-dark + ultra-muted at 80% opacity */
    --primary-ultra-dark-ultra-muted-trans-90: hsl(var(--primary-h), calc(var(--primary-s) - 40%), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.90)); /* Primary ultra-dark + ultra-muted at 90% opacity */
    --primary-ultra-dark-muted: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) - 40%)); /* References the Primary color ultra-dark + muted version */
    --primary-ultra-dark-muted-trans-10: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.10)); /* Primary ultra-dark + muted at 10% opacity */
    --primary-ultra-dark-muted-trans-20: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.20)); /* Primary ultra-dark + muted at 20% opacity */
    --primary-ultra-dark-muted-trans-40: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.40)); /* Primary ultra-dark + muted at 40% opacity */
    --primary-ultra-dark-muted-trans-60: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.60)); /* Primary ultra-dark + muted at 60% opacity */
    --primary-ultra-dark-muted-trans-80: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.80)); /* Primary ultra-dark + muted at 80% opacity */
    --primary-ultra-dark-muted-trans-90: hsl(var(--primary-h), calc(var(--primary-s) - 20%), calc(var(--primary-l) - 40%), calc(var(--primary-a) * 0.90)); /* Primary ultra-dark + muted at 90% opacity */
    --primary-ultra-dark-strong: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 47%)); /* References the Primary color ultra-dark + strong version */
    --primary-ultra-dark-strong-trans-10: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 47%), calc(var(--primary-a) * 0.10)); /* Primary ultra-dark + strong at 10% opacity */
    --primary-ultra-dark-strong-trans-20: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 47%), calc(var(--primary-a) * 0.20)); /* Primary ultra-dark + strong at 20% opacity */
    --primary-ultra-dark-strong-trans-40: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 47%), calc(var(--primary-a) * 0.40)); /* Primary ultra-dark + strong at 40% opacity */
    --primary-ultra-dark-strong-trans-60: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 47%), calc(var(--primary-a) * 0.60)); /* Primary ultra-dark + strong at 60% opacity */
    --primary-ultra-dark-strong-trans-80: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 47%), calc(var(--primary-a) * 0.80)); /* Primary ultra-dark + strong at 80% opacity */
    --primary-ultra-dark-strong-trans-90: hsl(var(--primary-h), calc(var(--primary-s) + 28%), calc(var(--primary-l) - 47%), calc(var(--primary-a) * 0.90)); /* Primary ultra-dark + strong at 90% opacity */
    --primary-ultra-dark-ultra-strong: hsl(var(--primary-h), calc(var(--primary-s) + 42%), calc(var(--primary-l) - 78%)); /* References the Primary color ultra-dark + ultra-strong version */
    --primary-ultra-dark-ultra-strong-trans-10: hsl(var(--primary-h), calc(var(--primary-s) + 42%), calc(var(--primary-l) - 78%), calc(var(--primary-a) * 0.10)); /* Primary ultra-dark + ultra-strong at 10% opacity */
    --primary-ultra-dark-ultra-strong-trans-20: hsl(var(--primary-h), calc(var(--primary-s) + 42%), calc(var(--primary-l) - 78%), calc(var(--primary-a) * 0.20)); /* Primary ultra-dark + ultra-strong at 20% opacity */
    --primary-ultra-dark-ultra-strong-trans-40: hsl(var(--primary-h), calc(var(--primary-s) + 42%), calc(var(--primary-l) - 78%), calc(var(--primary-a) * 0.40)); /* Primary ultra-dark + ultra-strong at 40% opacity */
    --primary-ultra-dark-ultra-strong-trans-60: hsl(var(--primary-h), calc(var(--primary-s) + 42%), calc(var(--primary-l) - 78%), calc(var(--primary-a) * 0.60)); /* Primary ultra-dark + ultra-strong at 60% opacity */
    --primary-ultra-dark-ultra-strong-trans-80: hsl(var(--primary-h), calc(var(--primary-s) + 42%), calc(var(--primary-l) - 78%), calc(var(--primary-a) * 0.80)); /* Primary ultra-dark + ultra-strong at 80% opacity */
    --primary-ultra-dark-ultra-strong-trans-90: hsl(var(--primary-h), calc(var(--primary-s) + 42%), calc(var(--primary-l) - 78%), calc(var(--primary-a) * 0.90)); /* Primary ultra-dark + ultra-strong at 90% opacity */





    /* Secondary Color Variations*/
    --secondary: hsl(var(--secondary-h) var(--secondary-s) var(--secondary-l) / var(--secondary-a)); /* References the secondary color */
    --secondary-comp: hsl(var(--secondary-h) var(--secondary-s) var(--secondary-l) / var(--secondary-a)); /* References the secondary complimentary color */
    --secondary-hover: hsl(var(--secondary-h) var(--secondary-s) var(--secondary-l) / var(--secondary-a)); /*References the secondary hover color */

    --secondary-trans-10: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l), calc(var(--secondary-a) * 0.1)); /* References the secondary color at 10% opacity. */
    --secondary-trans-20: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l), calc(var(--secondary-a) * 0.2)); /* References the secondary color at 20% opacity. */
    --secondary-trans-40: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l), calc(var(--secondary-a) * 0.4)); /* References the secondary color at 40% opacity. */
    --secondary-trans-60: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l), calc(var(--secondary-a) * 0.6)); /* References the secondary color at 60% opacity. */
    --secondary-trans-80: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l), calc(var(--secondary-a) * 0.8)); /* References the secondary color at 80% opacity. */
    --secondary-trans-90: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l), calc(var(--secondary-a) * 0.9)); /* References the secondary color at 90% opacity. */

    /* Light Variations */
    --secondary-ultra-light: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 40%)); /* References the secondary color ultra light version*/
    --secondary-ultra-light-trans-10: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.1)); /* References the secondary color ultra light version at 10% opacity*/
    --secondary-ultra-light-trans-20: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.2)); /* References the secondary color ultra light version at 20% opacity*/
    --secondary-ultra-light-trans-40: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.4)); /* References the secondary color ultra light version at 40% opacity*/
    --secondary-ultra-light-trans-60: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.6)); /* References the secondary color ultra light version at 60% opacity*/
    --secondary-ultra-light-trans-80: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.8)); /* References the secondary color ultra light version at 80% opacity*/
    --secondary-ultra-light-trans-90: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.9)); /* References the secondary color ultra light version at 90% opacity*/

    --secondary-light: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 20%)); /* References the secondary color light version*/
    --secondary-light-trans-10: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.1)); /* References the secondary color light version at 10% opacity*/
    --secondary-light-trans-20: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.2)); /* References the secondary color light version at 20% opacity*/
    --secondary-light-trans-40: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.4)); /* References the secondary color light version at 40% opacity*/
    --secondary-light-trans-60: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.6)); /* References the secondary color light version at 60% opacity*/
    --secondary-light-trans-80: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.8)); /* References the secondary color light version at 80% opacity*/
    --secondary-light-trans-90: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.9)); /* References the secondary color light version at 90% opacity*/

    --secondary-medium: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 10%)); /* References the secondary color medium version*/
    --secondary-medium-trans-10: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.1)); /* References the secondary color medium version at 10% opacity*/
    --secondary-medium-trans-20: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.2)); /* References the secondary color medium version at 20% opacity*/
    --secondary-medium-trans-40: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.4)); /* References the secondary color medium version at 40% opacity*/
    --secondary-medium-trans-60: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.6)); /* References the secondary color medium version at 60% opacity*/
    --secondary-medium-trans-80: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.8)); /* References the secondary color medium version at 80% opacity*/
    --secondary-medium-trans-90: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.9)); /* References the secondary color medium version at 90% opacity*/
 
    --secondary-dark: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 20%)); /* References the secondary color dark version*/
    --secondary-dark-trans-10: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.1)); /* References the secondary color dark version at 10% opacity*/
    --secondary-dark-trans-20: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.2)); /* References the secondary color dark version at 20% opacity*/
    --secondary-dark-trans-40: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.4)); /* References the secondary color dark version at 40% opacity*/
    --secondary-dark-trans-60: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.6)); /* References the secondary color dark version at 60% opacity*/
    --secondary-dark-trans-80: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.8)); /* References the secondary color dark version at 80% opacity*/
    --secondary-dark-trans-90: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.9)); /* References the secondary color dark version at 90% opacity*/

    --secondary-ultra-dark: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 40%)); /* References the secondary color ultra-dark version*/
    --secondary-ultra-dark-trans-10: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.1)); /* References the secondary color ultra-dark version at 10% opacity*/
    --secondary-ultra-dark-trans-20: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.2)); /* References the secondary color ultra-dark version at 20% opacity*/
    --secondary-ultra-dark-trans-40: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.4)); /* References the secondary color ultra-dark version at 40% opacity*/
    --secondary-ultra-dark-trans-60: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.6)); /* References the secondary color ultra-dark version at 60% opacity*/
    --secondary-ultra-dark-trans-80: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.8)); /* References the secondary color ultra-dark version at 80% opacity*/
    --secondary-ultra-dark-trans-90: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.9)); /* References the secondary color ultra-dark version at 90% opacity*/

    /* Saturation Variations */
    --secondary-ultra-muted: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), var(--secondary-l)); /* References the Secondary color ultra-muted version */
    --secondary-ultra-muted-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), var(--secondary-l), calc(var(--secondary-a) * 0.1)); /* References the Secondary color ultra-muted version at 10% opacity */
    --secondary-ultra-muted-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), var(--secondary-l), calc(var(--secondary-a) * 0.2)); /* References the Secondary color ultra-muted version at 20% opacity */
    --secondary-ultra-muted-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), var(--secondary-l), calc(var(--secondary-a) * 0.4)); /* References the Secondary color ultra-muted version at 40% opacity */
    --secondary-ultra-muted-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), var(--secondary-l), calc(var(--secondary-a) * 0.6)); /* References the Secondary color ultra-muted version at 60% opacity */
    --secondary-ultra-muted-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), var(--secondary-l), calc(var(--secondary-a) * 0.8)); /* References the Secondary color ultra-muted version at 80% opacity */
    --secondary-ultra-muted-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), var(--secondary-l), calc(var(--secondary-a) * 0.9)); /* References the Secondary color ultra-muted version at 90% opacity */

    --secondary-muted: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), var(--secondary-l)); /* References the Secondary color muted version */
    --secondary-muted-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), var(--secondary-l), calc(var(--secondary-a) * 0.1)); /* References the Secondary color muted version at 10% opacity */
    --secondary-muted-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), var(--secondary-l), calc(var(--secondary-a) * 0.2)); /* References the Secondary color muted version at 20% opacity */
    --secondary-muted-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), var(--secondary-l), calc(var(--secondary-a) * 0.4)); /* References the Secondary color muted version at 40% opacity */
    --secondary-muted-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), var(--secondary-l), calc(var(--secondary-a) * 0.6)); /* References the Secondary color muted version at 60% opacity */
    --secondary-muted-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), var(--secondary-l), calc(var(--secondary-a) * 0.8)); /* References the Secondary color muted version at 80% opacity */
    --secondary-muted-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), var(--secondary-l), calc(var(--secondary-a) * 0.9)); /* References the Secondary color muted version at 90% opacity */

    --secondary-strong: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), var(--secondary-l)); /* References the Secondary color strong version */
    --secondary-strong-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), var(--secondary-l), calc(var(--secondary-a) * 0.1)); /* References the Secondary color strong version at 10% opacity */
    --secondary-strong-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), var(--secondary-l), calc(var(--secondary-a) * 0.2)); /* References the Secondary color strong version at 20% opacity */
    --secondary-strong-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), var(--secondary-l), calc(var(--secondary-a) * 0.4)); /* References the Secondary color strong version at 40% opacity */
    --secondary-strong-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), var(--secondary-l), calc(var(--secondary-a) * 0.6)); /* References the Secondary color strong version at 60% opacity */
    --secondary-strong-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), var(--secondary-l), calc(var(--secondary-a) * 0.8)); /* References the Secondary color strong version at 80% opacity */
    --secondary-strong-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), var(--secondary-l), calc(var(--secondary-a) * 0.9)); /* References the Secondary color strong version at 90% opacity */

    --secondary-ultra-strong: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), var(--secondary-l)); /* References the Secondary color ultra-strong version */
    --secondary-ultra-strong-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), var(--secondary-l), calc(var(--secondary-a) * 0.1)); /* References the Secondary color ultra-strong version at 10% opacity */
    --secondary-ultra-strong-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), var(--secondary-l), calc(var(--secondary-a) * 0.2)); /* References the Secondary color ultra-strong version at 20% opacity */
    --secondary-ultra-strong-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), var(--secondary-l), calc(var(--secondary-a) * 0.4)); /* References the Secondary color ultra-strong version at 40% opacity */
    --secondary-ultra-strong-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), var(--secondary-l), calc(var(--secondary-a) * 0.6)); /* References the Secondary color ultra-strong version at 60% opacity */
    --secondary-ultra-strong-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), var(--secondary-l), calc(var(--secondary-a) * 0.8)); /* References the Secondary color ultra-strong version at 80% opacity */
    --secondary-ultra-strong-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), var(--secondary-l), calc(var(--secondary-a) * 0.9)); /* References the Secondary color ultra-strong version at 90% opacity */

    /* Combined Lightness + Saturation Variations */
    --secondary-ultra-light-ultra-muted: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 40%)); /* References the Secondary color ultra-light + ultra-muted version */
    --secondary-ultra-light-ultra-muted-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.10)); /* Secondary ultra-light + ultra-muted at 10% opacity */
    --secondary-ultra-light-ultra-muted-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.20)); /* Secondary ultra-light + ultra-muted at 20% opacity */
    --secondary-ultra-light-ultra-muted-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.40)); /* Secondary ultra-light + ultra-muted at 40% opacity */
    --secondary-ultra-light-ultra-muted-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.60)); /* Secondary ultra-light + ultra-muted at 60% opacity */
    --secondary-ultra-light-ultra-muted-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.80)); /* Secondary ultra-light + ultra-muted at 80% opacity */
    --secondary-ultra-light-ultra-muted-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.90)); /* Secondary ultra-light + ultra-muted at 90% opacity */
    --secondary-ultra-light-muted: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 40%)); /* References the Secondary color ultra-light + muted version */
    --secondary-ultra-light-muted-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.10)); /* Secondary ultra-light + muted at 10% opacity */
    --secondary-ultra-light-muted-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.20)); /* Secondary ultra-light + muted at 20% opacity */
    --secondary-ultra-light-muted-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.40)); /* Secondary ultra-light + muted at 40% opacity */
    --secondary-ultra-light-muted-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.60)); /* Secondary ultra-light + muted at 60% opacity */
    --secondary-ultra-light-muted-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.80)); /* Secondary ultra-light + muted at 80% opacity */
    --secondary-ultra-light-muted-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.90)); /* Secondary ultra-light + muted at 90% opacity */
    --secondary-ultra-light-strong: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 40%)); /* References the Secondary color ultra-light + strong version */
    --secondary-ultra-light-strong-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.10)); /* Secondary ultra-light + strong at 10% opacity */
    --secondary-ultra-light-strong-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.20)); /* Secondary ultra-light + strong at 20% opacity */
    --secondary-ultra-light-strong-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.40)); /* Secondary ultra-light + strong at 40% opacity */
    --secondary-ultra-light-strong-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.60)); /* Secondary ultra-light + strong at 60% opacity */
    --secondary-ultra-light-strong-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.80)); /* Secondary ultra-light + strong at 80% opacity */
    --secondary-ultra-light-strong-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.90)); /* Secondary ultra-light + strong at 90% opacity */
    --secondary-ultra-light-ultra-strong: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 40%)); /* References the Secondary color ultra-light + ultra-strong version */
    --secondary-ultra-light-ultra-strong-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.10)); /* Secondary ultra-light + ultra-strong at 10% opacity */
    --secondary-ultra-light-ultra-strong-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.20)); /* Secondary ultra-light + ultra-strong at 20% opacity */
    --secondary-ultra-light-ultra-strong-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.40)); /* Secondary ultra-light + ultra-strong at 40% opacity */
    --secondary-ultra-light-ultra-strong-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.60)); /* Secondary ultra-light + ultra-strong at 60% opacity */
    --secondary-ultra-light-ultra-strong-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.80)); /* Secondary ultra-light + ultra-strong at 80% opacity */
    --secondary-ultra-light-ultra-strong-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 40%), calc(var(--secondary-a) * 0.90)); /* Secondary ultra-light + ultra-strong at 90% opacity */

    --secondary-light-ultra-muted: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 20%)); /* References the Secondary color light + ultra-muted version */
    --secondary-light-ultra-muted-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.10)); /* Secondary light + ultra-muted at 10% opacity */
    --secondary-light-ultra-muted-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.20)); /* Secondary light + ultra-muted at 20% opacity */
    --secondary-light-ultra-muted-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.40)); /* Secondary light + ultra-muted at 40% opacity */
    --secondary-light-ultra-muted-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.60)); /* Secondary light + ultra-muted at 60% opacity */
    --secondary-light-ultra-muted-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.80)); /* Secondary light + ultra-muted at 80% opacity */
    --secondary-light-ultra-muted-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.90)); /* Secondary light + ultra-muted at 90% opacity */
    --secondary-light-muted: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 20%)); /* References the Secondary color light + muted version */
    --secondary-light-muted-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.10)); /* Secondary light + muted at 10% opacity */
    --secondary-light-muted-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.20)); /* Secondary light + muted at 20% opacity */
    --secondary-light-muted-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.40)); /* Secondary light + muted at 40% opacity */
    --secondary-light-muted-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.60)); /* Secondary light + muted at 60% opacity */
    --secondary-light-muted-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.80)); /* Secondary light + muted at 80% opacity */
    --secondary-light-muted-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.90)); /* Secondary light + muted at 90% opacity */
    --secondary-light-strong: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 20%)); /* References the Secondary color light + strong version */
    --secondary-light-strong-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.10)); /* Secondary light + strong at 10% opacity */
    --secondary-light-strong-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.20)); /* Secondary light + strong at 20% opacity */
    --secondary-light-strong-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.40)); /* Secondary light + strong at 40% opacity */
    --secondary-light-strong-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.60)); /* Secondary light + strong at 60% opacity */
    --secondary-light-strong-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.80)); /* Secondary light + strong at 80% opacity */
    --secondary-light-strong-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.90)); /* Secondary light + strong at 90% opacity */
    --secondary-light-ultra-strong: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 20%)); /* References the Secondary color light + ultra-strong version */
    --secondary-light-ultra-strong-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.10)); /* Secondary light + ultra-strong at 10% opacity */
    --secondary-light-ultra-strong-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.20)); /* Secondary light + ultra-strong at 20% opacity */
    --secondary-light-ultra-strong-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.40)); /* Secondary light + ultra-strong at 40% opacity */
    --secondary-light-ultra-strong-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.60)); /* Secondary light + ultra-strong at 60% opacity */
    --secondary-light-ultra-strong-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.80)); /* Secondary light + ultra-strong at 80% opacity */
    --secondary-light-ultra-strong-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 20%), calc(var(--secondary-a) * 0.90)); /* Secondary light + ultra-strong at 90% opacity */

    --secondary-medium-ultra-muted: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 10%)); /* References the Secondary color medium + ultra-muted version */
    --secondary-medium-ultra-muted-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.10)); /* Secondary medium + ultra-muted at 10% opacity */
    --secondary-medium-ultra-muted-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.20)); /* Secondary medium + ultra-muted at 20% opacity */
    --secondary-medium-ultra-muted-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.40)); /* Secondary medium + ultra-muted at 40% opacity */
    --secondary-medium-ultra-muted-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.60)); /* Secondary medium + ultra-muted at 60% opacity */
    --secondary-medium-ultra-muted-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.80)); /* Secondary medium + ultra-muted at 80% opacity */
    --secondary-medium-ultra-muted-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.90)); /* Secondary medium + ultra-muted at 90% opacity */
    --secondary-medium-muted: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 10%)); /* References the Secondary color medium + muted version */
    --secondary-medium-muted-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.10)); /* Secondary medium + muted at 10% opacity */
    --secondary-medium-muted-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.20)); /* Secondary medium + muted at 20% opacity */
    --secondary-medium-muted-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.40)); /* Secondary medium + muted at 40% opacity */
    --secondary-medium-muted-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.60)); /* Secondary medium + muted at 60% opacity */
    --secondary-medium-muted-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.80)); /* Secondary medium + muted at 80% opacity */
    --secondary-medium-muted-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.90)); /* Secondary medium + muted at 90% opacity */
    --secondary-medium-strong: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 10%)); /* References the Secondary color medium + strong version */
    --secondary-medium-strong-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.10)); /* Secondary medium + strong at 10% opacity */
    --secondary-medium-strong-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.20)); /* Secondary medium + strong at 20% opacity */
    --secondary-medium-strong-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.40)); /* Secondary medium + strong at 40% opacity */
    --secondary-medium-strong-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.60)); /* Secondary medium + strong at 60% opacity */
    --secondary-medium-strong-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.80)); /* Secondary medium + strong at 80% opacity */
    --secondary-medium-strong-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.90)); /* Secondary medium + strong at 90% opacity */
    --secondary-medium-ultra-strong: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 10%)); /* References the Secondary color medium + ultra-strong version */
    --secondary-medium-ultra-strong-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.10)); /* Secondary medium + ultra-strong at 10% opacity */
    --secondary-medium-ultra-strong-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.20)); /* Secondary medium + ultra-strong at 20% opacity */
    --secondary-medium-ultra-strong-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.40)); /* Secondary medium + ultra-strong at 40% opacity */
    --secondary-medium-ultra-strong-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.60)); /* Secondary medium + ultra-strong at 60% opacity */
    --secondary-medium-ultra-strong-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.80)); /* Secondary medium + ultra-strong at 80% opacity */
    --secondary-medium-ultra-strong-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) + 10%), calc(var(--secondary-a) * 0.90)); /* Secondary medium + ultra-strong at 90% opacity */

    --secondary-dark-ultra-muted: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) - 20%)); /* References the Secondary color dark + ultra-muted version */
    --secondary-dark-ultra-muted-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.10)); /* Secondary dark + ultra-muted at 10% opacity */
    --secondary-dark-ultra-muted-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.20)); /* Secondary dark + ultra-muted at 20% opacity */
    --secondary-dark-ultra-muted-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.40)); /* Secondary dark + ultra-muted at 40% opacity */
    --secondary-dark-ultra-muted-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.60)); /* Secondary dark + ultra-muted at 60% opacity */
    --secondary-dark-ultra-muted-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.80)); /* Secondary dark + ultra-muted at 80% opacity */
    --secondary-dark-ultra-muted-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.90)); /* Secondary dark + ultra-muted at 90% opacity */
    --secondary-dark-muted: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) - 20%)); /* References the Secondary color dark + muted version */
    --secondary-dark-muted-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.10)); /* Secondary dark + muted at 10% opacity */
    --secondary-dark-muted-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.20)); /* Secondary dark + muted at 20% opacity */
    --secondary-dark-muted-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.40)); /* Secondary dark + muted at 40% opacity */
    --secondary-dark-muted-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.60)); /* Secondary dark + muted at 60% opacity */
    --secondary-dark-muted-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.80)); /* Secondary dark + muted at 80% opacity */
    --secondary-dark-muted-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.90)); /* Secondary dark + muted at 90% opacity */
    --secondary-dark-strong: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) - 20%)); /* References the Secondary color dark + strong version */
    --secondary-dark-strong-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.10)); /* Secondary dark + strong at 10% opacity */
    --secondary-dark-strong-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.20)); /* Secondary dark + strong at 20% opacity */
    --secondary-dark-strong-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.40)); /* Secondary dark + strong at 40% opacity */
    --secondary-dark-strong-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.60)); /* Secondary dark + strong at 60% opacity */
    --secondary-dark-strong-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.80)); /* Secondary dark + strong at 80% opacity */
    --secondary-dark-strong-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.90)); /* Secondary dark + strong at 90% opacity */
    --secondary-dark-ultra-strong: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) - 20%)); /* References the Secondary color dark + ultra-strong version */
    --secondary-dark-ultra-strong-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.10)); /* Secondary dark + ultra-strong at 10% opacity */
    --secondary-dark-ultra-strong-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.20)); /* Secondary dark + ultra-strong at 20% opacity */
    --secondary-dark-ultra-strong-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.40)); /* Secondary dark + ultra-strong at 40% opacity */
    --secondary-dark-ultra-strong-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.60)); /* Secondary dark + ultra-strong at 60% opacity */
    --secondary-dark-ultra-strong-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.80)); /* Secondary dark + ultra-strong at 80% opacity */
    --secondary-dark-ultra-strong-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) - 20%), calc(var(--secondary-a) * 0.90)); /* Secondary dark + ultra-strong at 90% opacity */

    --secondary-ultra-dark-ultra-muted: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) - 40%)); /* References the Secondary color ultra-dark + ultra-muted version */
    --secondary-ultra-dark-ultra-muted-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.10)); /* Secondary ultra-dark + ultra-muted at 10% opacity */
    --secondary-ultra-dark-ultra-muted-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.20)); /* Secondary ultra-dark + ultra-muted at 20% opacity */
    --secondary-ultra-dark-ultra-muted-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.40)); /* Secondary ultra-dark + ultra-muted at 40% opacity */
    --secondary-ultra-dark-ultra-muted-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.60)); /* Secondary ultra-dark + ultra-muted at 60% opacity */
    --secondary-ultra-dark-ultra-muted-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.80)); /* Secondary ultra-dark + ultra-muted at 80% opacity */
    --secondary-ultra-dark-ultra-muted-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) - 40%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.90)); /* Secondary ultra-dark + ultra-muted at 90% opacity */
    --secondary-ultra-dark-muted: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) - 40%)); /* References the Secondary color ultra-dark + muted version */
    --secondary-ultra-dark-muted-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.10)); /* Secondary ultra-dark + muted at 10% opacity */
    --secondary-ultra-dark-muted-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.20)); /* Secondary ultra-dark + muted at 20% opacity */
    --secondary-ultra-dark-muted-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.40)); /* Secondary ultra-dark + muted at 40% opacity */
    --secondary-ultra-dark-muted-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.60)); /* Secondary ultra-dark + muted at 60% opacity */
    --secondary-ultra-dark-muted-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.80)); /* Secondary ultra-dark + muted at 80% opacity */
    --secondary-ultra-dark-muted-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.90)); /* Secondary ultra-dark + muted at 90% opacity */
    --secondary-ultra-dark-strong: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) - 40%)); /* References the Secondary color ultra-dark + strong version */
    --secondary-ultra-dark-strong-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.10)); /* Secondary ultra-dark + strong at 10% opacity */
    --secondary-ultra-dark-strong-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.20)); /* Secondary ultra-dark + strong at 20% opacity */
    --secondary-ultra-dark-strong-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.40)); /* Secondary ultra-dark + strong at 40% opacity */
    --secondary-ultra-dark-strong-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.60)); /* Secondary ultra-dark + strong at 60% opacity */
    --secondary-ultra-dark-strong-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.80)); /* Secondary ultra-dark + strong at 80% opacity */
    --secondary-ultra-dark-strong-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) + 20%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.90)); /* Secondary ultra-dark + strong at 90% opacity */
    --secondary-ultra-dark-ultra-strong: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) - 40%)); /* References the Secondary color ultra-dark + ultra-strong version */
    --secondary-ultra-dark-ultra-strong-trans-10: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.10)); /* Secondary ultra-dark + ultra-strong at 10% opacity */
    --secondary-ultra-dark-ultra-strong-trans-20: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.20)); /* Secondary ultra-dark + ultra-strong at 20% opacity */
    --secondary-ultra-dark-ultra-strong-trans-40: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.40)); /* Secondary ultra-dark + ultra-strong at 40% opacity */
    --secondary-ultra-dark-ultra-strong-trans-60: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.60)); /* Secondary ultra-dark + ultra-strong at 60% opacity */
    --secondary-ultra-dark-ultra-strong-trans-80: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.80)); /* Secondary ultra-dark + ultra-strong at 80% opacity */
    --secondary-ultra-dark-ultra-strong-trans-90: hsl(var(--secondary-h), calc(var(--secondary-s) + 40%), calc(var(--secondary-l) - 40%), calc(var(--secondary-a) * 0.90)); /* Secondary ultra-dark + ultra-strong at 90% opacity */




    /* Action Color Variations*/
    --action: hsl(var(--action-h) var(--action-s) var(--action-l) / var(--action-a)); /* References the action color */
    --action-comp: hsl(var(--action-h) var(--action-s) var(--action-l) / var(--action-a)); /* References the action complimentary color */
    --action-hover: hsl(var(--action-h) var(--action-s) var(--action-l) / var(--action-a)); /*References the action hover color */

    --action-trans-10: hsl(var(--action-h), var(--action-s), var(--action-l), calc(var(--action-a) * 0.1)); /* References the action color at 10% opacity. */
    --action-trans-20: hsl(var(--action-h), var(--action-s), var(--action-l), calc(var(--action-a) * 0.2)); /* References the action color at 20% opacity. */
    --action-trans-40: hsl(var(--action-h), var(--action-s), var(--action-l), calc(var(--action-a) * 0.4)); /* References the action color at 40% opacity. */
    --action-trans-60: hsl(var(--action-h), var(--action-s), var(--action-l), calc(var(--action-a) * 0.6)); /* References the action color at 60% opacity. */
    --action-trans-80: hsl(var(--action-h), var(--action-s), var(--action-l), calc(var(--action-a) * 0.8)); /* References the action color at 80% opacity. */
    --action-trans-90: hsl(var(--action-h), var(--action-s), var(--action-l), calc(var(--action-a) * 0.9)); /* References the action color at 90% opacity. */

    /* Lightness Variations */
    --action-ultra-light: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 40%)); /* References the action color ultra light version*/
    --action-ultra-light-trans-10: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.1)); /* References the action color ultra light version at 10% opacity*/
    --action-ultra-light-trans-20: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.2)); /* References the action color ultra light version at 20% opacity*/
    --action-ultra-light-trans-40: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.4)); /* References the action color ultra light version at 40% opacity*/
    --action-ultra-light-trans-60: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.6)); /* References the action color ultra light version at 60% opacity*/
    --action-ultra-light-trans-80: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.8)); /* References the action color ultra light version at 80% opacity*/
    --action-ultra-light-trans-90: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.9)); /* References the action color ultra light version at 90% opacity*/

    --action-light: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 20%)); /* References the action color light version*/
    --action-light-trans-10: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.1)); /* References the action color light version at 10% opacity*/
    --action-light-trans-20: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.2)); /* References the action color light version at 20% opacity*/
    --action-light-trans-40: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.4)); /* References the action color light version at 40% opacity*/
    --action-light-trans-60: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.6)); /* References the action color light version at 60% opacity*/
    --action-light-trans-80: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.8)); /* References the action color light version at 80% opacity*/
    --action-light-trans-90: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.9)); /* References the action color light version at 90% opacity*/

    --action-medium: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 10%)); /* References the action color medium version*/
    --action-medium-trans-10: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.1)); /* References the action color medium version at 10% opacity*/
    --action-medium-trans-20: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.2)); /* References the action color medium version at 20% opacity*/
    --action-medium-trans-40: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.4)); /* References the action color medium version at 40% opacity*/
    --action-medium-trans-60: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.6)); /* References the action color medium version at 60% opacity*/
    --action-medium-trans-80: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.8)); /* References the action color medium version at 80% opacity*/
    --action-medium-trans-90: hsl(var(--action-h), var(--action-s), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.9)); /* References the action color medium version at 90% opacity*/
 
    --action-dark: hsl(var(--action-h), var(--action-s), calc(var(--action-l) - 20%)); /* References the action color dark version*/
    --action-dark-trans-10: hsl(var(--action-h), var(--action-s), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.1)); /* References the action color dark version at 10% opacity*/
    --action-dark-trans-20: hsl(var(--action-h), var(--action-s), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.2)); /* References the action color dark version at 20% opacity*/
    --action-dark-trans-40: hsl(var(--action-h), var(--action-s), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.4)); /* References the action color dark version at 40% opacity*/
    --action-dark-trans-60: hsl(var(--action-h), var(--action-s), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.6)); /* References the action color dark version at 60% opacity*/
    --action-dark-trans-80: hsl(var(--action-h), var(--action-s), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.8)); /* References the action color dark version at 80% opacity*/
    --action-dark-trans-90: hsl(var(--action-h), var(--action-s), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.9)); /* References the action color dark version at 90% opacity*/

    --action-ultra-dark: hsl(var(--action-h), var(--action-s), calc(var(--action-l) - 40%)); /* References the action color ultra-dark version*/
    --action-ultra-dark-trans-10: hsl(var(--action-h), var(--action-s), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.1)); /* References the action color ultra-dark version at 10% opacity*/
    --action-ultra-dark-trans-20: hsl(var(--action-h), var(--action-s), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.2)); /* References the action color ultra-dark version at 20% opacity*/
    --action-ultra-dark-trans-40: hsl(var(--action-h), var(--action-s), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.4)); /* References the action color ultra-dark version at 40% opacity*/
    --action-ultra-dark-trans-60: hsl(var(--action-h), var(--action-s), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.6)); /* References the action color ultra-dark version at 60% opacity*/
    --action-ultra-dark-trans-80: hsl(var(--action-h), var(--action-s), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.8)); /* References the action color ultra-dark version at 80% opacity*/
    --action-ultra-dark-trans-90: hsl(var(--action-h), var(--action-s), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.9)); /* References the action color ultra-dark version at 90% opacity*/

    /* Saturation Variations */ 
    --action-ultra-muted: hsl(var(--action-h), calc(var(--action-s) - 40%), var(--action-l)); /* References the Action color ultra-muted version */
    --action-ultra-muted-trans-10: hsl(var(--action-h), calc(var(--action-s) - 40%), var(--action-l), calc(var(--action-a) * 0.1)); /* References the Action color ultra-muted version at 10% opacity */
    --action-ultra-muted-trans-20: hsl(var(--action-h), calc(var(--action-s) - 40%), var(--action-l), calc(var(--action-a) * 0.2)); /* References the Action color ultra-muted version at 20% opacity */
    --action-ultra-muted-trans-40: hsl(var(--action-h), calc(var(--action-s) - 40%), var(--action-l), calc(var(--action-a) * 0.4)); /* References the Action color ultra-muted version at 40% opacity */
    --action-ultra-muted-trans-60: hsl(var(--action-h), calc(var(--action-s) - 40%), var(--action-l), calc(var(--action-a) * 0.6)); /* References the Action color ultra-muted version at 60% opacity */
    --action-ultra-muted-trans-80: hsl(var(--action-h), calc(var(--action-s) - 40%), var(--action-l), calc(var(--action-a) * 0.8)); /* References the Action color ultra-muted version at 80% opacity */
    --action-ultra-muted-trans-90: hsl(var(--action-h), calc(var(--action-s) - 40%), var(--action-l), calc(var(--action-a) * 0.9)); /* References the Action color ultra-muted version at 90% opacity */

    --action-muted: hsl(var(--action-h), calc(var(--action-s) - 20%), var(--action-l)); /* References the Action color muted version */
    --action-muted-trans-10: hsl(var(--action-h), calc(var(--action-s) - 20%), var(--action-l), calc(var(--action-a) * 0.1)); /* References the Action color muted version at 10% opacity */
    --action-muted-trans-20: hsl(var(--action-h), calc(var(--action-s) - 20%), var(--action-l), calc(var(--action-a) * 0.2)); /* References the Action color muted version at 20% opacity */
    --action-muted-trans-40: hsl(var(--action-h), calc(var(--action-s) - 20%), var(--action-l), calc(var(--action-a) * 0.4)); /* References the Action color muted version at 40% opacity */
    --action-muted-trans-60: hsl(var(--action-h), calc(var(--action-s) - 20%), var(--action-l), calc(var(--action-a) * 0.6)); /* References the Action color muted version at 60% opacity */
    --action-muted-trans-80: hsl(var(--action-h), calc(var(--action-s) - 20%), var(--action-l), calc(var(--action-a) * 0.8)); /* References the Action color muted version at 80% opacity */
    --action-muted-trans-90: hsl(var(--action-h), calc(var(--action-s) - 20%), var(--action-l), calc(var(--action-a) * 0.9)); /* References the Action color muted version at 90% opacity */

    --action-strong: hsl(var(--action-h), calc(var(--action-s) + 20%), var(--action-l)); /* References the Action color strong version */
    --action-strong-trans-10: hsl(var(--action-h), calc(var(--action-s) + 20%), var(--action-l), calc(var(--action-a) * 0.1)); /* References the Action color strong version at 10% opacity */
    --action-strong-trans-20: hsl(var(--action-h), calc(var(--action-s) + 20%), var(--action-l), calc(var(--action-a) * 0.2)); /* References the Action color strong version at 20% opacity */
    --action-strong-trans-40: hsl(var(--action-h), calc(var(--action-s) + 20%), var(--action-l), calc(var(--action-a) * 0.4)); /* References the Action color strong version at 40% opacity */
    --action-strong-trans-60: hsl(var(--action-h), calc(var(--action-s) + 20%), var(--action-l), calc(var(--action-a) * 0.6)); /* References the Action color strong version at 60% opacity */
    --action-strong-trans-80: hsl(var(--action-h), calc(var(--action-s) + 20%), var(--action-l), calc(var(--action-a) * 0.8)); /* References the Action color strong version at 80% opacity */
    --action-strong-trans-90: hsl(var(--action-h), calc(var(--action-s) + 20%), var(--action-l), calc(var(--action-a) * 0.9)); /* References the Action color strong version at 90% opacity */

    --action-ultra-strong: hsl(var(--action-h), calc(var(--action-s) + 40%), var(--action-l)); /* References the Action color ultra-strong version */
    --action-ultra-strong-trans-10: hsl(var(--action-h), calc(var(--action-s) + 40%), var(--action-l), calc(var(--action-a) * 0.1)); /* References the Action color ultra-strong version at 10% opacity */
    --action-ultra-strong-trans-20: hsl(var(--action-h), calc(var(--action-s) + 40%), var(--action-l), calc(var(--action-a) * 0.2)); /* References the Action color ultra-strong version at 20% opacity */
    --action-ultra-strong-trans-40: hsl(var(--action-h), calc(var(--action-s) + 40%), var(--action-l), calc(var(--action-a) * 0.4)); /* References the Action color ultra-strong version at 40% opacity */
    --action-ultra-strong-trans-60: hsl(var(--action-h), calc(var(--action-s) + 40%), var(--action-l), calc(var(--action-a) * 0.6)); /* References the Action color ultra-strong version at 60% opacity */
    --action-ultra-strong-trans-80: hsl(var(--action-h), calc(var(--action-s) + 40%), var(--action-l), calc(var(--action-a) * 0.8)); /* References the Action color ultra-strong version at 80% opacity */
    --action-ultra-strong-trans-90: hsl(var(--action-h), calc(var(--action-s) + 40%), var(--action-l), calc(var(--action-a) * 0.9)); /* References the Action color ultra-strong version at 90% opacity */

    /* Combined Lightness + Saturation Variations */
    --action-ultra-light-ultra-muted: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 40%)); /* References the Action color ultra-light + ultra-muted version */
    --action-ultra-light-ultra-muted-trans-10: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.10)); /* Action ultra-light + ultra-muted at 10% opacity */
    --action-ultra-light-ultra-muted-trans-20: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.20)); /* Action ultra-light + ultra-muted at 20% opacity */
    --action-ultra-light-ultra-muted-trans-40: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.40)); /* Action ultra-light + ultra-muted at 40% opacity */
    --action-ultra-light-ultra-muted-trans-60: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.60)); /* Action ultra-light + ultra-muted at 60% opacity */
    --action-ultra-light-ultra-muted-trans-80: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.80)); /* Action ultra-light + ultra-muted at 80% opacity */
    --action-ultra-light-ultra-muted-trans-90: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.90)); /* Action ultra-light + ultra-muted at 90% opacity */
    --action-ultra-light-muted: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 40%)); /* References the Action color ultra-light + muted version */
    --action-ultra-light-muted-trans-10: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.10)); /* Action ultra-light + muted at 10% opacity */
    --action-ultra-light-muted-trans-20: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.20)); /* Action ultra-light + muted at 20% opacity */
    --action-ultra-light-muted-trans-40: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.40)); /* Action ultra-light + muted at 40% opacity */
    --action-ultra-light-muted-trans-60: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.60)); /* Action ultra-light + muted at 60% opacity */
    --action-ultra-light-muted-trans-80: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.80)); /* Action ultra-light + muted at 80% opacity */
    --action-ultra-light-muted-trans-90: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.90)); /* Action ultra-light + muted at 90% opacity */
    --action-ultra-light-strong: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 40%)); /* References the Action color ultra-light + strong version */
    --action-ultra-light-strong-trans-10: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.10)); /* Action ultra-light + strong at 10% opacity */
    --action-ultra-light-strong-trans-20: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.20)); /* Action ultra-light + strong at 20% opacity */
    --action-ultra-light-strong-trans-40: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.40)); /* Action ultra-light + strong at 40% opacity */
    --action-ultra-light-strong-trans-60: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.60)); /* Action ultra-light + strong at 60% opacity */
    --action-ultra-light-strong-trans-80: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.80)); /* Action ultra-light + strong at 80% opacity */
    --action-ultra-light-strong-trans-90: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.90)); /* Action ultra-light + strong at 90% opacity */
    --action-ultra-light-ultra-strong: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 40%)); /* References the Action color ultra-light + ultra-strong version */
    --action-ultra-light-ultra-strong-trans-10: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.10)); /* Action ultra-light + ultra-strong at 10% opacity */
    --action-ultra-light-ultra-strong-trans-20: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.20)); /* Action ultra-light + ultra-strong at 20% opacity */
    --action-ultra-light-ultra-strong-trans-40: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.40)); /* Action ultra-light + ultra-strong at 40% opacity */
    --action-ultra-light-ultra-strong-trans-60: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.60)); /* Action ultra-light + ultra-strong at 60% opacity */
    --action-ultra-light-ultra-strong-trans-80: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.80)); /* Action ultra-light + ultra-strong at 80% opacity */
    --action-ultra-light-ultra-strong-trans-90: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 40%), calc(var(--action-a) * 0.90)); /* Action ultra-light + ultra-strong at 90% opacity */

    --action-light-ultra-muted: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 20%)); /* References the Action color light + ultra-muted version */
    --action-light-ultra-muted-trans-10: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.10)); /* Action light + ultra-muted at 10% opacity */
    --action-light-ultra-muted-trans-20: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.20)); /* Action light + ultra-muted at 20% opacity */
    --action-light-ultra-muted-trans-40: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.40)); /* Action light + ultra-muted at 40% opacity */
    --action-light-ultra-muted-trans-60: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.60)); /* Action light + ultra-muted at 60% opacity */
    --action-light-ultra-muted-trans-80: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.80)); /* Action light + ultra-muted at 80% opacity */
    --action-light-ultra-muted-trans-90: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.90)); /* Action light + ultra-muted at 90% opacity */
    --action-light-muted: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 20%)); /* References the Action color light + muted version */
    --action-light-muted-trans-10: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.10)); /* Action light + muted at 10% opacity */
    --action-light-muted-trans-20: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.20)); /* Action light + muted at 20% opacity */
    --action-light-muted-trans-40: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.40)); /* Action light + muted at 40% opacity */
    --action-light-muted-trans-60: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.60)); /* Action light + muted at 60% opacity */
    --action-light-muted-trans-80: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.80)); /* Action light + muted at 80% opacity */
    --action-light-muted-trans-90: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.90)); /* Action light + muted at 90% opacity */
    --action-light-strong: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 20%)); /* References the Action color light + strong version */
    --action-light-strong-trans-10: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.10)); /* Action light + strong at 10% opacity */
    --action-light-strong-trans-20: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.20)); /* Action light + strong at 20% opacity */
    --action-light-strong-trans-40: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.40)); /* Action light + strong at 40% opacity */
    --action-light-strong-trans-60: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.60)); /* Action light + strong at 60% opacity */
    --action-light-strong-trans-80: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.80)); /* Action light + strong at 80% opacity */
    --action-light-strong-trans-90: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.90)); /* Action light + strong at 90% opacity */
    --action-light-ultra-strong: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 20%)); /* References the Action color light + ultra-strong version */
    --action-light-ultra-strong-trans-10: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.10)); /* Action light + ultra-strong at 10% opacity */
    --action-light-ultra-strong-trans-20: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.20)); /* Action light + ultra-strong at 20% opacity */
    --action-light-ultra-strong-trans-40: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.40)); /* Action light + ultra-strong at 40% opacity */
    --action-light-ultra-strong-trans-60: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.60)); /* Action light + ultra-strong at 60% opacity */
    --action-light-ultra-strong-trans-80: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.80)); /* Action light + ultra-strong at 80% opacity */
    --action-light-ultra-strong-trans-90: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 20%), calc(var(--action-a) * 0.90)); /* Action light + ultra-strong at 90% opacity */

    --action-medium-ultra-muted: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 10%)); /* References the Action color medium + ultra-muted version */
    --action-medium-ultra-muted-trans-10: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.10)); /* Action medium + ultra-muted at 10% opacity */
    --action-medium-ultra-muted-trans-20: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.20)); /* Action medium + ultra-muted at 20% opacity */
    --action-medium-ultra-muted-trans-40: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.40)); /* Action medium + ultra-muted at 40% opacity */
    --action-medium-ultra-muted-trans-60: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.60)); /* Action medium + ultra-muted at 60% opacity */
    --action-medium-ultra-muted-trans-80: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.80)); /* Action medium + ultra-muted at 80% opacity */
    --action-medium-ultra-muted-trans-90: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.90)); /* Action medium + ultra-muted at 90% opacity */
    --action-medium-muted: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 10%)); /* References the Action color medium + muted version */
    --action-medium-muted-trans-10: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.10)); /* Action medium + muted at 10% opacity */
    --action-medium-muted-trans-20: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.20)); /* Action medium + muted at 20% opacity */
    --action-medium-muted-trans-40: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.40)); /* Action medium + muted at 40% opacity */
    --action-medium-muted-trans-60: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.60)); /* Action medium + muted at 60% opacity */
    --action-medium-muted-trans-80: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.80)); /* Action medium + muted at 80% opacity */
    --action-medium-muted-trans-90: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.90)); /* Action medium + muted at 90% opacity */
    --action-medium-strong: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 10%)); /* References the Action color medium + strong version */
    --action-medium-strong-trans-10: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.10)); /* Action medium + strong at 10% opacity */
    --action-medium-strong-trans-20: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.20)); /* Action medium + strong at 20% opacity */
    --action-medium-strong-trans-40: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.40)); /* Action medium + strong at 40% opacity */
    --action-medium-strong-trans-60: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.60)); /* Action medium + strong at 60% opacity */
    --action-medium-strong-trans-80: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.80)); /* Action medium + strong at 80% opacity */
    --action-medium-strong-trans-90: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.90)); /* Action medium + strong at 90% opacity */
    --action-medium-ultra-strong: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 10%)); /* References the Action color medium + ultra-strong version */
    --action-medium-ultra-strong-trans-10: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.10)); /* Action medium + ultra-strong at 10% opacity */
    --action-medium-ultra-strong-trans-20: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.20)); /* Action medium + ultra-strong at 20% opacity */
    --action-medium-ultra-strong-trans-40: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.40)); /* Action medium + ultra-strong at 40% opacity */
    --action-medium-ultra-strong-trans-60: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.60)); /* Action medium + ultra-strong at 60% opacity */
    --action-medium-ultra-strong-trans-80: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.80)); /* Action medium + ultra-strong at 80% opacity */
    --action-medium-ultra-strong-trans-90: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) + 10%), calc(var(--action-a) * 0.90)); /* Action medium + ultra-strong at 90% opacity */

    --action-dark-ultra-muted: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) - 20%)); /* References the Action color dark + ultra-muted version */
    --action-dark-ultra-muted-trans-10: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.10)); /* Action dark + ultra-muted at 10% opacity */
    --action-dark-ultra-muted-trans-20: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.20)); /* Action dark + ultra-muted at 20% opacity */
    --action-dark-ultra-muted-trans-40: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.40)); /* Action dark + ultra-muted at 40% opacity */
    --action-dark-ultra-muted-trans-60: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.60)); /* Action dark + ultra-muted at 60% opacity */
    --action-dark-ultra-muted-trans-80: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.80)); /* Action dark + ultra-muted at 80% opacity */
    --action-dark-ultra-muted-trans-90: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.90)); /* Action dark + ultra-muted at 90% opacity */
    --action-dark-muted: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) - 20%)); /* References the Action color dark + muted version */
    --action-dark-muted-trans-10: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.10)); /* Action dark + muted at 10% opacity */
    --action-dark-muted-trans-20: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.20)); /* Action dark + muted at 20% opacity */
    --action-dark-muted-trans-40: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.40)); /* Action dark + muted at 40% opacity */
    --action-dark-muted-trans-60: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.60)); /* Action dark + muted at 60% opacity */
    --action-dark-muted-trans-80: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.80)); /* Action dark + muted at 80% opacity */
    --action-dark-muted-trans-90: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.90)); /* Action dark + muted at 90% opacity */
    --action-dark-strong: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) - 20%)); /* References the Action color dark + strong version */
    --action-dark-strong-trans-10: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.10)); /* Action dark + strong at 10% opacity */
    --action-dark-strong-trans-20: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.20)); /* Action dark + strong at 20% opacity */
    --action-dark-strong-trans-40: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.40)); /* Action dark + strong at 40% opacity */
    --action-dark-strong-trans-60: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.60)); /* Action dark + strong at 60% opacity */
    --action-dark-strong-trans-80: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.80)); /* Action dark + strong at 80% opacity */
    --action-dark-strong-trans-90: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.90)); /* Action dark + strong at 90% opacity */
    --action-dark-ultra-strong: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) - 20%)); /* References the Action color dark + ultra-strong version */
    --action-dark-ultra-strong-trans-10: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.10)); /* Action dark + ultra-strong at 10% opacity */
    --action-dark-ultra-strong-trans-20: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.20)); /* Action dark + ultra-strong at 20% opacity */
    --action-dark-ultra-strong-trans-40: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.40)); /* Action dark + ultra-strong at 40% opacity */
    --action-dark-ultra-strong-trans-60: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.60)); /* Action dark + ultra-strong at 60% opacity */
    --action-dark-ultra-strong-trans-80: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.80)); /* Action dark + ultra-strong at 80% opacity */
    --action-dark-ultra-strong-trans-90: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) - 20%), calc(var(--action-a) * 0.90)); /* Action dark + ultra-strong at 90% opacity */

    --action-ultra-dark-ultra-muted: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) - 40%)); /* References the Action color ultra-dark + ultra-muted version */
    --action-ultra-dark-ultra-muted-trans-10: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.10)); /* Action ultra-dark + ultra-muted at 10% opacity */
    --action-ultra-dark-ultra-muted-trans-20: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.20)); /* Action ultra-dark + ultra-muted at 20% opacity */
    --action-ultra-dark-ultra-muted-trans-40: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.40)); /* Action ultra-dark + ultra-muted at 40% opacity */
    --action-ultra-dark-ultra-muted-trans-60: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.60)); /* Action ultra-dark + ultra-muted at 60% opacity */
    --action-ultra-dark-ultra-muted-trans-80: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.80)); /* Action ultra-dark + ultra-muted at 80% opacity */
    --action-ultra-dark-ultra-muted-trans-90: hsl(var(--action-h), calc(var(--action-s) - 40%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.90)); /* Action ultra-dark + ultra-muted at 90% opacity */
    --action-ultra-dark-muted: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) - 40%)); /* References the Action color ultra-dark + muted version */
    --action-ultra-dark-muted-trans-10: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.10)); /* Action ultra-dark + muted at 10% opacity */
    --action-ultra-dark-muted-trans-20: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.20)); /* Action ultra-dark + muted at 20% opacity */
    --action-ultra-dark-muted-trans-40: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.40)); /* Action ultra-dark + muted at 40% opacity */
    --action-ultra-dark-muted-trans-60: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.60)); /* Action ultra-dark + muted at 60% opacity */
    --action-ultra-dark-muted-trans-80: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.80)); /* Action ultra-dark + muted at 80% opacity */
    --action-ultra-dark-muted-trans-90: hsl(var(--action-h), calc(var(--action-s) - 20%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.90)); /* Action ultra-dark + muted at 90% opacity */
    --action-ultra-dark-strong: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) - 40%)); /* References the Action color ultra-dark + strong version */
    --action-ultra-dark-strong-trans-10: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.10)); /* Action ultra-dark + strong at 10% opacity */
    --action-ultra-dark-strong-trans-20: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.20)); /* Action ultra-dark + strong at 20% opacity */
    --action-ultra-dark-strong-trans-40: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.40)); /* Action ultra-dark + strong at 40% opacity */
    --action-ultra-dark-strong-trans-60: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.60)); /* Action ultra-dark + strong at 60% opacity */
    --action-ultra-dark-strong-trans-80: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.80)); /* Action ultra-dark + strong at 80% opacity */
    --action-ultra-dark-strong-trans-90: hsl(var(--action-h), calc(var(--action-s) + 20%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.90)); /* Action ultra-dark + strong at 90% opacity */
    --action-ultra-dark-ultra-strong: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) - 40%)); /* References the Action color ultra-dark + ultra-strong version */
    --action-ultra-dark-ultra-strong-trans-10: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.10)); /* Action ultra-dark + ultra-strong at 10% opacity */
    --action-ultra-dark-ultra-strong-trans-20: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.20)); /* Action ultra-dark + ultra-strong at 20% opacity */
    --action-ultra-dark-ultra-strong-trans-40: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.40)); /* Action ultra-dark + ultra-strong at 40% opacity */
    --action-ultra-dark-ultra-strong-trans-60: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.60)); /* Action ultra-dark + ultra-strong at 60% opacity */
    --action-ultra-dark-ultra-strong-trans-80: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.80)); /* Action ultra-dark + ultra-strong at 80% opacity */
    --action-ultra-dark-ultra-strong-trans-90: hsl(var(--action-h), calc(var(--action-s) + 40%), calc(var(--action-l) - 40%), calc(var(--action-a) * 0.90)); /* Action ultra-dark + ultra-strong at 90% opacity */




    /* Base Color Variations*/
    --base: hsl(var(--base-h) var(--base-s) var(--base-l) / var(--base-a)); /* References the base color */
    --base-comp: hsl(var(--base-h) var(--base-s) var(--base-l) / var(--base-a)); /* References the base complimentary color */
    --base-hover: hsl(var(--base-h) var(--base-s) var(--base-l) / var(--base-a)); /*References the base hover color */

    --base-trans-10: hsl(var(--base-h), var(--base-s), var(--base-l), calc(var(--base-a) * 0.1)); /* References the base color at 10% opacity. */
    --base-trans-20: hsl(var(--base-h), var(--base-s), var(--base-l), calc(var(--base-a) * 0.2)); /* References the base color at 20% opacity. */
    --base-trans-40: hsl(var(--base-h), var(--base-s), var(--base-l), calc(var(--base-a) * 0.4)); /* References the base color at 40% opacity. */
    --base-trans-60: hsl(var(--base-h), var(--base-s), var(--base-l), calc(var(--base-a) * 0.6)); /* References the base color at 60% opacity. */
    --base-trans-80: hsl(var(--base-h), var(--base-s), var(--base-l), calc(var(--base-a) * 0.8)); /* References the base color at 80% opacity. */
    --base-trans-90: hsl(var(--base-h), var(--base-s), var(--base-l), calc(var(--base-a) * 0.9)); /* References the base color at 90% opacity. */

    /* Lightness Variations */
    --base-ultra-light: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 40%)); /* References the base color ultra light version*/
    --base-ultra-light-trans-10: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.1)); /* References the base color ultra light version at 10% opacity*/
    --base-ultra-light-trans-20: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.2)); /* References the base color ultra light version at 20% opacity*/
    --base-ultra-light-trans-40: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.4)); /* References the base color ultra light version at 40% opacity*/
    --base-ultra-light-trans-60: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.6)); /* References the base color ultra light version at 60% opacity*/
    --base-ultra-light-trans-80: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.8)); /* References the base color ultra light version at 80% opacity*/
    --base-ultra-light-trans-90: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.9)); /* References the base color ultra light version at 90% opacity*/

    --base-light: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 20%)); /* References the base color light version*/
    --base-light-trans-10: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.1)); /* References the base color light version at 10% opacity*/
    --base-light-trans-20: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.2)); /* References the base color light version at 20% opacity*/
    --base-light-trans-40: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.4)); /* References the base color light version at 40% opacity*/
    --base-light-trans-60: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.6)); /* References the base color light version at 60% opacity*/
    --base-light-trans-80: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.8)); /* References the base color light version at 80% opacity*/
    --base-light-trans-90: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.9)); /* References the base color light version at 90% opacity*/

    --base-medium: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 10%)); /* References the base color medium version*/
    --base-medium-trans-10: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.1)); /* References the base color medium version at 10% opacity*/
    --base-medium-trans-20: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.2)); /* References the base color medium version at 20% opacity*/
    --base-medium-trans-40: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.4)); /* References the base color medium version at 40% opacity*/
    --base-medium-trans-60: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.6)); /* References the base color medium version at 60% opacity*/
    --base-medium-trans-80: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.8)); /* References the base color medium version at 80% opacity*/
    --base-medium-trans-90: hsl(var(--base-h), var(--base-s), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.9)); /* References the base color medium version at 90% opacity*/
 
    --base-dark: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 20%)); /* References the base color dark version*/
    --base-dark-trans-10: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.1)); /* References the base color dark version at 10% opacity*/
    --base-dark-trans-20: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.2)); /* References the base color dark version at 20% opacity*/
    --base-dark-trans-40: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.4)); /* References the base color dark version at 40% opacity*/
    --base-dark-trans-60: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.6)); /* References the base color dark version at 60% opacity*/
    --base-dark-trans-80: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.8)); /* References the base color dark version at 80% opacity*/
    --base-dark-trans-90: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.9)); /* References the base color dark version at 90% opacity*/

    --base-ultra-dark: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 40%)); /* References the base color ultra-dark version*/
    --base-ultra-dark-trans-10: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.1)); /* References the base color ultra-dark version at 10% opacity*/
    --base-ultra-dark-trans-20: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.2)); /* References the base color ultra-dark version at 20% opacity*/
    --base-ultra-dark-trans-40: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.4)); /* References the base color ultra-dark version at 40% opacity*/
    --base-ultra-dark-trans-60: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.6)); /* References the base color ultra-dark version at 60% opacity*/
    --base-ultra-dark-trans-80: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.8)); /* References the base color ultra-dark version at 80% opacity*/
    --base-ultra-dark-trans-90: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.9)); /* References the base color ultra-dark version at 90% opacity*/

    /* Saturation Variations */ 
    --base-ultra-muted: hsl(var(--base-h), calc(var(--base-s) - 40%), var(--base-l)); /* References the Base color ultra-muted version */
    --base-ultra-muted-trans-10: hsl(var(--base-h), calc(var(--base-s) - 40%), var(--base-l), calc(var(--base-a) * 0.1)); /* References the Base color ultra-muted version at 10% opacity */
    --base-ultra-muted-trans-20: hsl(var(--base-h), calc(var(--base-s) - 40%), var(--base-l), calc(var(--base-a) * 0.2)); /* References the Base color ultra-muted version at 20% opacity */
    --base-ultra-muted-trans-40: hsl(var(--base-h), calc(var(--base-s) - 40%), var(--base-l), calc(var(--base-a) * 0.4)); /* References the Base color ultra-muted version at 40% opacity */
    --base-ultra-muted-trans-60: hsl(var(--base-h), calc(var(--base-s) - 40%), var(--base-l), calc(var(--base-a) * 0.6)); /* References the Base color ultra-muted version at 60% opacity */
    --base-ultra-muted-trans-80: hsl(var(--base-h), calc(var(--base-s) - 40%), var(--base-l), calc(var(--base-a) * 0.8)); /* References the Base color ultra-muted version at 80% opacity */
    --base-ultra-muted-trans-90: hsl(var(--base-h), calc(var(--base-s) - 40%), var(--base-l), calc(var(--base-a) * 0.9)); /* References the Base color ultra-muted version at 90% opacity */

    --base-muted: hsl(var(--base-h), calc(var(--base-s) - 20%), var(--base-l)); /* References the Base color muted version */
    --base-muted-trans-10: hsl(var(--base-h), calc(var(--base-s) - 20%), var(--base-l), calc(var(--base-a) * 0.1)); /* References the Base color muted version at 10% opacity */
    --base-muted-trans-20: hsl(var(--base-h), calc(var(--base-s) - 20%), var(--base-l), calc(var(--base-a) * 0.2)); /* References the Base color muted version at 20% opacity */
    --base-muted-trans-40: hsl(var(--base-h), calc(var(--base-s) - 20%), var(--base-l), calc(var(--base-a) * 0.4)); /* References the Base color muted version at 40% opacity */
    --base-muted-trans-60: hsl(var(--base-h), calc(var(--base-s) - 20%), var(--base-l), calc(var(--base-a) * 0.6)); /* References the Base color muted version at 60% opacity */
    --base-muted-trans-80: hsl(var(--base-h), calc(var(--base-s) - 20%), var(--base-l), calc(var(--base-a) * 0.8)); /* References the Base color muted version at 80% opacity */
    --base-muted-trans-90: hsl(var(--base-h), calc(var(--base-s) - 20%), var(--base-l), calc(var(--base-a) * 0.9)); /* References the Base color muted version at 90% opacity */

    --base-strong: hsl(var(--base-h), calc(var(--base-s) + 20%), var(--base-l)); /* References the Base color strong version */
    --base-strong-trans-10: hsl(var(--base-h), calc(var(--base-s) + 20%), var(--base-l), calc(var(--base-a) * 0.1)); /* References the Base color strong version at 10% opacity */
    --base-strong-trans-20: hsl(var(--base-h), calc(var(--base-s) + 20%), var(--base-l), calc(var(--base-a) * 0.2)); /* References the Base color strong version at 20% opacity */
    --base-strong-trans-40: hsl(var(--base-h), calc(var(--base-s) + 20%), var(--base-l), calc(var(--base-a) * 0.4)); /* References the Base color strong version at 40% opacity */
    --base-strong-trans-60: hsl(var(--base-h), calc(var(--base-s) + 20%), var(--base-l), calc(var(--base-a) * 0.6)); /* References the Base color strong version at 60% opacity */
    --base-strong-trans-80: hsl(var(--base-h), calc(var(--base-s) + 20%), var(--base-l), calc(var(--base-a) * 0.8)); /* References the Base color strong version at 80% opacity */
    --base-strong-trans-90: hsl(var(--base-h), calc(var(--base-s) + 20%), var(--base-l), calc(var(--base-a) * 0.9)); /* References the Base color strong version at 90% opacity */

    --base-ultra-strong: hsl(var(--base-h), calc(var(--base-s) + 40%), var(--base-l)); /* References the Base color ultra-strong version */
    --base-ultra-strong-trans-10: hsl(var(--base-h), calc(var(--base-s) + 40%), var(--base-l), calc(var(--base-a) * 0.1)); /* References the Base color ultra-strong version at 10% opacity */
    --base-ultra-strong-trans-20: hsl(var(--base-h), calc(var(--base-s) + 40%), var(--base-l), calc(var(--base-a) * 0.2)); /* References the Base color ultra-strong version at 20% opacity */
    --base-ultra-strong-trans-40: hsl(var(--base-h), calc(var(--base-s) + 40%), var(--base-l), calc(var(--base-a) * 0.4)); /* References the Base color ultra-strong version at 40% opacity */
    --base-ultra-strong-trans-60: hsl(var(--base-h), calc(var(--base-s) + 40%), var(--base-l), calc(var(--base-a) * 0.6)); /* References the Base color ultra-strong version at 60% opacity */
    --base-ultra-strong-trans-80: hsl(var(--base-h), calc(var(--base-s) + 40%), var(--base-l), calc(var(--base-a) * 0.8)); /* References the Base color ultra-strong version at 80% opacity */
    --base-ultra-strong-trans-90: hsl(var(--base-h), calc(var(--base-s) + 40%), var(--base-l), calc(var(--base-a) * 0.9)); /* References the Base color ultra-strong version at 90% opacity */

    /* Combined Lightness + Saturation Variations */
    --base-ultra-light-ultra-muted: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 40%)); /* References the Base color ultra-light + ultra-muted version */
    --base-ultra-light-ultra-muted-trans-10: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.10)); /* Base ultra-light + ultra-muted at 10% opacity */
    --base-ultra-light-ultra-muted-trans-20: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.20)); /* Base ultra-light + ultra-muted at 20% opacity */
    --base-ultra-light-ultra-muted-trans-40: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.40)); /* Base ultra-light + ultra-muted at 40% opacity */
    --base-ultra-light-ultra-muted-trans-60: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.60)); /* Base ultra-light + ultra-muted at 60% opacity */
    --base-ultra-light-ultra-muted-trans-80: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.80)); /* Base ultra-light + ultra-muted at 80% opacity */
    --base-ultra-light-ultra-muted-trans-90: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.90)); /* Base ultra-light + ultra-muted at 90% opacity */
    --base-ultra-light-muted: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 40%)); /* References the Base color ultra-light + muted version */
    --base-ultra-light-muted-trans-10: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.10)); /* Base ultra-light + muted at 10% opacity */
    --base-ultra-light-muted-trans-20: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.20)); /* Base ultra-light + muted at 20% opacity */
    --base-ultra-light-muted-trans-40: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.40)); /* Base ultra-light + muted at 40% opacity */
    --base-ultra-light-muted-trans-60: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.60)); /* Base ultra-light + muted at 60% opacity */
    --base-ultra-light-muted-trans-80: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.80)); /* Base ultra-light + muted at 80% opacity */
    --base-ultra-light-muted-trans-90: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.90)); /* Base ultra-light + muted at 90% opacity */
    --base-ultra-light-strong: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 40%)); /* References the Base color ultra-light + strong version */
    --base-ultra-light-strong-trans-10: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.10)); /* Base ultra-light + strong at 10% opacity */
    --base-ultra-light-strong-trans-20: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.20)); /* Base ultra-light + strong at 20% opacity */
    --base-ultra-light-strong-trans-40: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.40)); /* Base ultra-light + strong at 40% opacity */
    --base-ultra-light-strong-trans-60: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.60)); /* Base ultra-light + strong at 60% opacity */
    --base-ultra-light-strong-trans-80: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.80)); /* Base ultra-light + strong at 80% opacity */
    --base-ultra-light-strong-trans-90: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.90)); /* Base ultra-light + strong at 90% opacity */
    --base-ultra-light-ultra-strong: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 40%)); /* References the Base color ultra-light + ultra-strong version */
    --base-ultra-light-ultra-strong-trans-10: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.10)); /* Base ultra-light + ultra-strong at 10% opacity */
    --base-ultra-light-ultra-strong-trans-20: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.20)); /* Base ultra-light + ultra-strong at 20% opacity */
    --base-ultra-light-ultra-strong-trans-40: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.40)); /* Base ultra-light + ultra-strong at 40% opacity */
    --base-ultra-light-ultra-strong-trans-60: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.60)); /* Base ultra-light + ultra-strong at 60% opacity */
    --base-ultra-light-ultra-strong-trans-80: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.80)); /* Base ultra-light + ultra-strong at 80% opacity */
    --base-ultra-light-ultra-strong-trans-90: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 40%), calc(var(--base-a) * 0.90)); /* Base ultra-light + ultra-strong at 90% opacity */

    --base-light-ultra-muted: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 20%)); /* References the Base color light + ultra-muted version */
    --base-light-ultra-muted-trans-10: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.10)); /* Base light + ultra-muted at 10% opacity */
    --base-light-ultra-muted-trans-20: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.20)); /* Base light + ultra-muted at 20% opacity */
    --base-light-ultra-muted-trans-40: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.40)); /* Base light + ultra-muted at 40% opacity */
    --base-light-ultra-muted-trans-60: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.60)); /* Base light + ultra-muted at 60% opacity */
    --base-light-ultra-muted-trans-80: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.80)); /* Base light + ultra-muted at 80% opacity */
    --base-light-ultra-muted-trans-90: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.90)); /* Base light + ultra-muted at 90% opacity */
    --base-light-muted: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 20%)); /* References the Base color light + muted version */
    --base-light-muted-trans-10: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.10)); /* Base light + muted at 10% opacity */
    --base-light-muted-trans-20: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.20)); /* Base light + muted at 20% opacity */
    --base-light-muted-trans-40: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.40)); /* Base light + muted at 40% opacity */
    --base-light-muted-trans-60: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.60)); /* Base light + muted at 60% opacity */
    --base-light-muted-trans-80: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.80)); /* Base light + muted at 80% opacity */
    --base-light-muted-trans-90: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.90)); /* Base light + muted at 90% opacity */
    --base-light-strong: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 20%)); /* References the Base color light + strong version */
    --base-light-strong-trans-10: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.10)); /* Base light + strong at 10% opacity */
    --base-light-strong-trans-20: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.20)); /* Base light + strong at 20% opacity */
    --base-light-strong-trans-40: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.40)); /* Base light + strong at 40% opacity */
    --base-light-strong-trans-60: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.60)); /* Base light + strong at 60% opacity */
    --base-light-strong-trans-80: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.80)); /* Base light + strong at 80% opacity */
    --base-light-strong-trans-90: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.90)); /* Base light + strong at 90% opacity */
    --base-light-ultra-strong: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 20%)); /* References the Base color light + ultra-strong version */
    --base-light-ultra-strong-trans-10: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.10)); /* Base light + ultra-strong at 10% opacity */
    --base-light-ultra-strong-trans-20: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.20)); /* Base light + ultra-strong at 20% opacity */
    --base-light-ultra-strong-trans-40: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.40)); /* Base light + ultra-strong at 40% opacity */
    --base-light-ultra-strong-trans-60: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.60)); /* Base light + ultra-strong at 60% opacity */
    --base-light-ultra-strong-trans-80: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.80)); /* Base light + ultra-strong at 80% opacity */
    --base-light-ultra-strong-trans-90: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 20%), calc(var(--base-a) * 0.90)); /* Base light + ultra-strong at 90% opacity */

    --base-medium-ultra-muted: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 10%)); /* References the Base color medium + ultra-muted version */
    --base-medium-ultra-muted-trans-10: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.10)); /* Base medium + ultra-muted at 10% opacity */
    --base-medium-ultra-muted-trans-20: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.20)); /* Base medium + ultra-muted at 20% opacity */
    --base-medium-ultra-muted-trans-40: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.40)); /* Base medium + ultra-muted at 40% opacity */
    --base-medium-ultra-muted-trans-60: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.60)); /* Base medium + ultra-muted at 60% opacity */
    --base-medium-ultra-muted-trans-80: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.80)); /* Base medium + ultra-muted at 80% opacity */
    --base-medium-ultra-muted-trans-90: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.90)); /* Base medium + ultra-muted at 90% opacity */
    --base-medium-muted: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 10%)); /* References the Base color medium + muted version */
    --base-medium-muted-trans-10: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.10)); /* Base medium + muted at 10% opacity */
    --base-medium-muted-trans-20: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.20)); /* Base medium + muted at 20% opacity */
    --base-medium-muted-trans-40: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.40)); /* Base medium + muted at 40% opacity */
    --base-medium-muted-trans-60: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.60)); /* Base medium + muted at 60% opacity */
    --base-medium-muted-trans-80: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.80)); /* Base medium + muted at 80% opacity */
    --base-medium-muted-trans-90: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.90)); /* Base medium + muted at 90% opacity */
    --base-medium-strong: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 10%)); /* References the Base color medium + strong version */
    --base-medium-strong-trans-10: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.10)); /* Base medium + strong at 10% opacity */
    --base-medium-strong-trans-20: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.20)); /* Base medium + strong at 20% opacity */
    --base-medium-strong-trans-40: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.40)); /* Base medium + strong at 40% opacity */
    --base-medium-strong-trans-60: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.60)); /* Base medium + strong at 60% opacity */
    --base-medium-strong-trans-80: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.80)); /* Base medium + strong at 80% opacity */
    --base-medium-strong-trans-90: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.90)); /* Base medium + strong at 90% opacity */
    --base-medium-ultra-strong: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 10%)); /* References the Base color medium + ultra-strong version */
    --base-medium-ultra-strong-trans-10: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.10)); /* Base medium + ultra-strong at 10% opacity */
    --base-medium-ultra-strong-trans-20: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.20)); /* Base medium + ultra-strong at 20% opacity */
    --base-medium-ultra-strong-trans-40: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.40)); /* Base medium + ultra-strong at 40% opacity */
    --base-medium-ultra-strong-trans-60: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.60)); /* Base medium + ultra-strong at 60% opacity */
    --base-medium-ultra-strong-trans-80: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.80)); /* Base medium + ultra-strong at 80% opacity */
    --base-medium-ultra-strong-trans-90: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) + 10%), calc(var(--base-a) * 0.90)); /* Base medium + ultra-strong at 90% opacity */

    --base-dark-ultra-muted: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) - 20%)); /* References the Base color dark + ultra-muted version */
    --base-dark-ultra-muted-trans-10: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.10)); /* Base dark + ultra-muted at 10% opacity */
    --base-dark-ultra-muted-trans-20: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.20)); /* Base dark + ultra-muted at 20% opacity */
    --base-dark-ultra-muted-trans-40: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.40)); /* Base dark + ultra-muted at 40% opacity */
    --base-dark-ultra-muted-trans-60: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.60)); /* Base dark + ultra-muted at 60% opacity */
    --base-dark-ultra-muted-trans-80: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.80)); /* Base dark + ultra-muted at 80% opacity */
    --base-dark-ultra-muted-trans-90: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.90)); /* Base dark + ultra-muted at 90% opacity */
    --base-dark-muted: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) - 20%)); /* References the Base color dark + muted version */
    --base-dark-muted-trans-10: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.10)); /* Base dark + muted at 10% opacity */
    --base-dark-muted-trans-20: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.20)); /* Base dark + muted at 20% opacity */
    --base-dark-muted-trans-40: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.40)); /* Base dark + muted at 40% opacity */
    --base-dark-muted-trans-60: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.60)); /* Base dark + muted at 60% opacity */
    --base-dark-muted-trans-80: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.80)); /* Base dark + muted at 80% opacity */
    --base-dark-muted-trans-90: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.90)); /* Base dark + muted at 90% opacity */
    --base-dark-strong: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) - 20%)); /* References the Base color dark + strong version */
    --base-dark-strong-trans-10: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.10)); /* Base dark + strong at 10% opacity */
    --base-dark-strong-trans-20: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.20)); /* Base dark + strong at 20% opacity */
    --base-dark-strong-trans-40: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.40)); /* Base dark + strong at 40% opacity */
    --base-dark-strong-trans-60: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.60)); /* Base dark + strong at 60% opacity */
    --base-dark-strong-trans-80: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.80)); /* Base dark + strong at 80% opacity */
    --base-dark-strong-trans-90: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.90)); /* Base dark + strong at 90% opacity */
    --base-dark-ultra-strong: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) - 20%)); /* References the Base color dark + ultra-strong version */
    --base-dark-ultra-strong-trans-10: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.10)); /* Base dark + ultra-strong at 10% opacity */
    --base-dark-ultra-strong-trans-20: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.20)); /* Base dark + ultra-strong at 20% opacity */
    --base-dark-ultra-strong-trans-40: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.40)); /* Base dark + ultra-strong at 40% opacity */
    --base-dark-ultra-strong-trans-60: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.60)); /* Base dark + ultra-strong at 60% opacity */
    --base-dark-ultra-strong-trans-80: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.80)); /* Base dark + ultra-strong at 80% opacity */
    --base-dark-ultra-strong-trans-90: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) - 20%), calc(var(--base-a) * 0.90)); /* Base dark + ultra-strong at 90% opacity */

    --base-ultra-dark-ultra-muted: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) - 40%)); /* References the Base color ultra-dark + ultra-muted version */
    --base-ultra-dark-ultra-muted-trans-10: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.10)); /* Base ultra-dark + ultra-muted at 10% opacity */
    --base-ultra-dark-ultra-muted-trans-20: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.20)); /* Base ultra-dark + ultra-muted at 20% opacity */
    --base-ultra-dark-ultra-muted-trans-40: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.40)); /* Base ultra-dark + ultra-muted at 40% opacity */
    --base-ultra-dark-ultra-muted-trans-60: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.60)); /* Base ultra-dark + ultra-muted at 60% opacity */
    --base-ultra-dark-ultra-muted-trans-80: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.80)); /* Base ultra-dark + ultra-muted at 80% opacity */
    --base-ultra-dark-ultra-muted-trans-90: hsl(var(--base-h), calc(var(--base-s) - 40%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.90)); /* Base ultra-dark + ultra-muted at 90% opacity */
    --base-ultra-dark-muted: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) - 40%)); /* References the Base color ultra-dark + muted version */
    --base-ultra-dark-muted-trans-10: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.10)); /* Base ultra-dark + muted at 10% opacity */
    --base-ultra-dark-muted-trans-20: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.20)); /* Base ultra-dark + muted at 20% opacity */
    --base-ultra-dark-muted-trans-40: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.40)); /* Base ultra-dark + muted at 40% opacity */
    --base-ultra-dark-muted-trans-60: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.60)); /* Base ultra-dark + muted at 60% opacity */
    --base-ultra-dark-muted-trans-80: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.80)); /* Base ultra-dark + muted at 80% opacity */
    --base-ultra-dark-muted-trans-90: hsl(var(--base-h), calc(var(--base-s) - 20%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.90)); /* Base ultra-dark + muted at 90% opacity */
    --base-ultra-dark-strong: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) - 40%)); /* References the Base color ultra-dark + strong version */
    --base-ultra-dark-strong-trans-10: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.10)); /* Base ultra-dark + strong at 10% opacity */
    --base-ultra-dark-strong-trans-20: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.20)); /* Base ultra-dark + strong at 20% opacity */
    --base-ultra-dark-strong-trans-40: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.40)); /* Base ultra-dark + strong at 40% opacity */
    --base-ultra-dark-strong-trans-60: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.60)); /* Base ultra-dark + strong at 60% opacity */
    --base-ultra-dark-strong-trans-80: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.80)); /* Base ultra-dark + strong at 80% opacity */
    --base-ultra-dark-strong-trans-90: hsl(var(--base-h), calc(var(--base-s) + 20%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.90)); /* Base ultra-dark + strong at 90% opacity */
    --base-ultra-dark-ultra-strong: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) - 40%)); /* References the Base color ultra-dark + ultra-strong version */
    --base-ultra-dark-ultra-strong-trans-10: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.10)); /* Base ultra-dark + ultra-strong at 10% opacity */
    --base-ultra-dark-ultra-strong-trans-20: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.20)); /* Base ultra-dark + ultra-strong at 20% opacity */
    --base-ultra-dark-ultra-strong-trans-40: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.40)); /* Base ultra-dark + ultra-strong at 40% opacity */
    --base-ultra-dark-ultra-strong-trans-60: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.60)); /* Base ultra-dark + ultra-strong at 60% opacity */
    --base-ultra-dark-ultra-strong-trans-80: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.80)); /* Base ultra-dark + ultra-strong at 80% opacity */
    --base-ultra-dark-ultra-strong-trans-90: hsl(var(--base-h), calc(var(--base-s) + 40%), calc(var(--base-l) - 40%), calc(var(--base-a) * 0.90)); /* Base ultra-dark + ultra-strong at 90% opacity */


    
}

/* Class Based Variables */ 
/* Layout Structures */ 
.grid--2 {
    display: grid;
    grid-template-columns: repeat( 2, minmax(0, 1fr) );
    grid-gap: var(--grid-gap);
}
.grid--3 {
    display: grid;
    grid-template-columns: repeat( 3, minmax(0, 1fr) );
    grid-gap: var(--grid-gap);
.grid--4 {
    display: grid;
    grid-template-columns: repeat( 4, minmax(0, 1fr) );
    grid-gap: var(--grid-gap);
}
.grid--5 {
    display: grid;
    grid-template-columns: repeat( 5, minmax(0, 1fr) );
    grid-gap: var(--grid-gap);
}
.grid--6 {
    display: grid;
    grid-template-columns: repeat( 6, minmax(0, 1fr) );
    grid-gap: var(--grid-gap);
}
.grid--7 {
    display: grid;
    grid-template-columns: repeat( 7, minmax(0, 1fr) );
    grid-gap: var(--grid-gap);
}
.grid--8 {
    display: grid;
    grid-template-columns: repeat( 8, minmax(0, 1fr) );
    grid-gap: var(--grid-gap);
}
.grid-auto--5 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(5rem, 1fr));
}
.grid-auto--10 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(10rem, 1fr));
}
.grid-auto--20 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(20rem, 1fr));
}
.grid-auto--30 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(30rem, 1fr));
}
.grid-auto--40 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(40rem, 1fr));
}
.grid-auto--50 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(50rem, 1fr));
}
.grid-auto--60 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(60rem, 1fr));
}
.grid-auto--70 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(70rem, 1fr));
}