:root{
    /* Base Values */
    --color-lighttone:228 38 47;
    --color-midtone:122 123 124;
    --color-darktone:33 41 50;
    --color-userMenu:255 255 255;

    --lighttone-color: from rgb(var(--color-lighttone)) h s l;
    --midtone-color: from rgb(var(--color-midtone)) h s l;
    --darktone-color: from rgb(var(--color-darktone)) h s l;
    --userMenu-color: from rgb(255 255 255) h s l;

    /* Lightness */
    --lighttone50-color: from rgb(var(--color-lighttone)) h s 95%;
    --lighttone100-color: from rgb(var(--color-lighttone)) h s 85%;
    --lighttone200-color: from rgb(var(--color-lighttone)) h s 75%;
    --lighttone300-color: from rgb(var(--color-lighttone)) h s 65%;
    --lighttone400-color: from rgb(var(--color-lighttone)) h s 55%;
    --lighttone500-color: from rgb(var(--color-lighttone)) h s 45%;
    --lighttone600-color: from rgb(var(--color-lighttone)) h s 35%;
    --lighttone700-color: from rgb(var(--color-lighttone)) h s 25%;
    --lighttone800-color: from rgb(var(--color-lighttone)) h s 20%;
    --lighttone900-color: from rgb(var(--color-lighttone)) h s 15%;

    --midtone50-color: from rgb(var(--color-midtone)) h s 95%;
    --midtone100-color: from rgb(var(--color-midtone)) h s 85%;
    --midtone200-color: from rgb(var(--color-midtone)) h s 75%;
    --midtone300-color: from rgb(var(--color-midtone)) h s 65%;
    --midtone400-color: from rgb(var(--color-midtone)) h s 55%;
    --midtone500-color: from rgb(var(--color-midtone)) h s 45%;
    --midtone600-color: from rgb(var(--color-midtone)) h s 35%;
    --midtone700-color: from rgb(var(--color-midtone)) h s 25%;
    --midtone800-color: from rgb(var(--color-midtone)) h s 20%;
    --midtone900-color: from rgb(var(--color-midtone)) h s 15%;
    
    --darktone50-color: from rgb(var(--color-darktone)) h s 95%;
    --darktone100-color: from rgb(var(--color-darktone)) h s 85%;
    --darktone200-color: from rgb(var(--color-darktone)) h s 75%;
    --darktone300-color: from rgb(var(--color-darktone)) h s 65%;
    --darktone400-color: from rgb(var(--color-darktone)) h s 55%;
    --darktone500-color: from rgb(var(--color-darktone)) h s 45%;
    --darktone600-color: from rgb(var(--color-darktone)) h s 35%;
    --darktone700-color: from rgb(var(--color-darktone)) h s 25%;
    --darktone800-color: from rgb(var(--color-darktone)) h s 20%;
    --darktone900-color: from rgb(var(--color-darktone)) h s 15%;

    /* Typefaces */
    --font-title: "League Gothic", sans-serif;
    --font-subtitle: "Archivo Narrow", sans-serif;
    --font-contents: "Work Sans", sans-serif;
}