/********************* 
 * Z5 Colors - Monochromatic 
 *
 * 3 Color Scheme
 *
 * Monochromatic schemes vary the lightness and
 * saturation of the primary hue while keeping
 * the hue constant.
 *
 * 
 * HSL NOTES
 * OLD hsl = hsl(val, val, val, .9)
 * NEW hsl = hsl(val val val / 9) 
 *
 *
 *
 */

 :root {

    /* Primary */
    --mono-primary-h: 217deg;
    --mono-primary-s: 89;
    --mono-primary-l: 61;
    --mono-primary: hsl(
        var(--mono-primary-h)
        var(--mono-primary-s)
        var(--mono-primary-l)
    );

    

    --mono-primary-light: hsl(
        var(--mono-primary-h)
        calc(var(--mono-primary-s) + 10)
        calc(var(--mono-primary-l) + 5)
    );
    --mono-primary-dark: hsl(
        var(--mono-primary-h)
        calc(var(--mono-primary-s) - 10)
        calc(var(--mono-primary-l) - 5)
    );

    /* Secondary */
    --mono-secondary-h: var(--mono-primary-h);
    --mono-secondary-s: calc(var(--mono-primary-s) - 10);
    --mono-secondary-l: calc(var(--mono-primary-l) + 10);
    --mono-secondary: hsl(
        var(--mono-secondary-h)
        var(--mono-secondary-s)
        var(--mono-secondary-l)
    );

    --mono-secondary-light: hsl(
        var(--mono-secondary-h)
        calc(var(--mono-secondary-s) + 10)
        calc(var(--mono-secondary-l) + 5)
    );
    --mono-secondary-dark: hsl(
        var(--mono-secondary-h)
        calc(var(--mono-secondary-s) - 10)
        calc(var(--mono-secondary-l) - 5)
    );

    /* Tertiary */
    --mono-tertiary-h: var(--mono-primary-h);
    --mono-tertiary-s: calc(var(--mono-primary-s) + 10);
    --mono-tertiary-l: calc(var(--mono-primary-l) - 10);
    --mono-tertiary: hsl(
        var(--mono-tertiary-h)
        var(--mono-tertiary-s)
        var(--mono-tertiary-l)
    );

    --mono-tertiary-light: hsl(
        var(--mono-tertiary-h)
        calc(var(--mono-tertiary-s) + 10)
        calc(var(--mono-tertiary-l) + 5)
    );
    --mono-tertiary-dark: hsl(
        var(--mono-tertiary-h)
        calc(var(--mono-tertiary-s) - 10)
        calc(var(--mono-tertiary-l) - 5)
    );

    /* Action */
    --mono-action: var(--mono-tertiary);
    --mono-action-light: var(--mono-tertiary-light);
    --mono-action-dark: var(--mono-tertiary-dark);

    /* Dark */
    --mono-dark-h: 0deg;
    --mono-dark-s: 0;
    --mono-dark-l: 9;
    --mono-dark: hsl(
        var(--mono-dark-h)
        var(--mono-dark-s)
        var(--mono-dark-l)
    );

    --mono-dark-2: hsl(
        var(--mono-dark-h)
        var(--mono-dark-s)
        15
    );
    --mono-dark-3: hsl(
        var(--mono-dark-h)
        var(--mono-dark-s)
        25
    );

    --mono-dark-3-trans-20: hsl(
        var(--mono-dark-h)
        var(--mono-dark-s)
        25 / .8
    );

    /* Light */
    --mono-light-h: 0deg;
    --mono-light-s: 0;
    --mono-light-l: 100;
    --mono-light: hsl(
        var(--mono-light-h)
        var(--mono-light-s)
        var(--mono-light-l)
    );

    --mono-light-2: hsl(
        var(--mono-light-h)
        var(--mono-light-s)
        97
    );
    --mono-light-3: hsl(
        var(--mono-light-h)
        var(--mono-light-s)
        95
    );

    --mono-light-trans-20: hsl(
        var(--mono-light-h)
        var(--mono-light-s)
        var(--mono-light-l) / .8
    );
}