/* theme-extended.css */
:root {
    /* Base Color Formats */
    --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;
    /* Lighttone Variations */
    --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%;
    /* Midtone Variations */
    --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%;
    /* Darktone Variations */
    --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%;
    /* Typography */
    --font-title: "League Gothic", sans-serif;
    --font-subtitle: "Archivo Narrow", sans-serif;
    --font-contents: "Work Sans", sans-serif;
}