/* Light-Mode-Colors */

:root {
    /* Text color */
    --c-text-h: 185;
    --c-text-s: 100%;
    --c-text-l: 10%;

    --c-text: hsl(var(--c-text-h), var(--c-text-s), var(--c-text-l));

    /* Highlight color */
    --c-highlight-h: 345;
    --c-highlight-s: 90%;
    --c-highlight-l: 65%;

    --c-highlight: hsl(var(--c-highlight-h), var(--c-highlight-s), var(--c-highlight-l));

    /* Background color */
    --c-background-h: 305;
    --c-background-s: 5%;
    --c-background-l: 90%;

    --c-background: hsl(var(--c-background-h), var(--c-background-s), var(--c-background-l));

    /* Frosted Glass light */
    --frosted-glass-background: rgba(255, 255, 255, .5);
    --frosted-glass-blendmode: soft-light;
    --frosted-glass-blur: blur(10px);
    --frosted-glass-border: var(--size-borders) solid hsla(var(--c-background-h), var(--c-background-s), calc(var(--c-background-l) + 10%), .4);
}


/* Dark-Mode Colors */
@media (prefers-color-scheme: dark) {
    :root {
        /* Text color */

        /* Hue defined in light color */
        --c-text-s: 20%;
        --c-text-l: 85%;
    
        --c-text: hsl(var(--c-text-h), var(--c-text-s), var(--c-text-l));

        /* Highlight color */

        /* Hue defined in light color */
        --c-highlight-s: 80%;
        --c-highlight-l: 70%;
    
        --c-highlight: hsl(var(--c-highlight-h), var(--c-highlight-s), var(--c-highlight-l));
    
        /* Background color */
        
        /* Hue and Saturation defined in light color */
        --c-background-l: 20%;
    
        --c-background: hsl(var(--c-background-h), var(--c-background-s), var(--c-background-l));

        /* Frosted Glass dark */
        --frosted-glass-background: rgba(0, 0, 0, .5)
    }
}


 /* 
    Use base color to generate lighter and darker alternatives.
    For every color, use base hue and saturation and add or distract from the lightness value.
*/
 :root {

    /* Highlight colors */
    /* Lightness steps: 12.5% */
    --c-highlight-lightest: hsl(var(--c-highlight-h), calc(var(--c-highlight-s) + 5%), calc(var(--c-highlight-l) + 25%));
    --c-highlight-lighter: hsl(var(--c-highlight-h), calc(var(--c-highlight-s) + 2.5%), calc(var(--c-highlight-l) + 12.5%));
    --c-highlight-darker: hsl(var(--c-highlight-h), calc(var(--c-highlight-s) - 15%), calc(var(--c-highlight-l) - 15%));
    --c-highlight-darkest: hsl(var(--c-highlight-h), calc(var(--c-highlight-s) - 30%), calc(var(--c-highlight-l) - 30%));


    /* Background colors */
    /* Lightness steps: 5% */
    --c-background-lightest: hsl(var(--c-background-h), var(--c-background-s), calc(var(--c-background-l) + 10%));
    --c-background-lighter: hsl(var(--c-background-h), var(--c-background-s), calc(var(--c-background-l) + 5%));
    --c-background-darker: hsl(var(--c-background-h), var(--c-background-s), calc(var(--c-background-l) - 5%));
    --c-background-darkest: hsl(var(--c-background-h), var(--c-background-s), calc(var(--c-background-l) - 10%));

    /* For text colors, change transparency for lightness (works in light and dark mode) */
 }


 /* Shadows */
 /* Generated by Joshua Comeau */

 :root {
    --shadow-color: 0deg 0% 0%;
    --shadow-elevation-low:
      0.3px 1px 0.8px hsl(var(--shadow-color) / 0.1),
      0.4px 1.3px 1px -2.5px hsl(var(--shadow-color) / 0.07),
      0.9px 3px 2.3px -5px hsl(var(--shadow-color) / 0.03);
    --shadow-elevation-medium:
      0.3px 1px 0.8px hsl(var(--shadow-color) / 0.11),
      0.5px 1.5px 1.2px -1.7px hsl(var(--shadow-color) / 0.08),
      1.6px 5.1px 4px -3.3px hsl(var(--shadow-color) / 0.05),
      4.6px 15px 11.8px -5px hsl(var(--shadow-color) / 0.03);
    --shadow-elevation-high:
      0.3px 1px 0.8px hsl(var(--shadow-color) / 0.11),
      0.4px 1.2px 0.9px -0.8px hsl(var(--shadow-color) / 0.1),
      0.9px 2.8px 2.2px -1.7px hsl(var(--shadow-color) / 0.08),
      2.2px 7.1px 5.6px -2.5px hsl(var(--shadow-color) / 0.06),
      4.8px 15.5px 12.2px -3.3px hsl(var(--shadow-color) / 0.05),
      9px 29.4px 23.1px -4.2px hsl(var(--shadow-color) / 0.03),
      15.3px 50px 39.2px -5px hsl(var(--shadow-color) / 0.02);
  }