/********************* 
 * Z5 Colors - Square
 *
 * 4 Color Scheme
 *
 * Square colors are evenly spaced by 90° 
 * on the color wheel.
 * 
 *
 * HSL Notes
 * OLD hsl = hsl(val, val, val, .9)
 * NEW hsl = hsl(val val val / 9) 
 *
 *
 *
 */


:root {

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

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

    /* Secondary */
    --sqr-secondary-h: calc(var(--sqr-primary-h) + 90deg);
    --sqr-secondary-s: var(--sqr-primary-s);
    --sqr-secondary-l: var(--sqr-primary-l);
    --sqr-secondary: hsl(
        var(--sqr-secondary-h)
        var(--sqr-secondary-s)
        var(--sqr-secondary-l)
    );

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

    /* Tertiary */
    --sqr-tertiary-h: calc(var(--sqr-primary-h) + 180deg);
    --sqr-tertiary-s: var(--sqr-primary-s);
    --sqr-tertiary-l: var(--sqr-primary-l);
    --sqr-tertiary: hsl(
        var(--sqr-tertiary-h)
        var(--sqr-tertiary-s)
        var(--sqr-tertiary-l)
    );

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

    /* Quaternary */
    --sqr-quaternary-h: calc(var(--sqr-primary-h) + 270deg);
    --sqr-quaternary-s: var(--sqr-primary-s);
    --sqr-quaternary-l: var(--sqr-primary-l);
    --sqr-quaternary: hsl(
        var(--sqr-quaternary-h)
        var(--sqr-quaternary-s)
        var(--sqr-quaternary-l)
    );

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

    /* Action */
    --sqr-action: hsl(
        var(--sqr-action-h)
        var(--sqr-action-s)
        var(--sqr-action-l)
    );

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

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

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

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

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

    --sqr-white-2: hsl(
        var(--sqr-white-h)
        var(--sqr-white-s)
        97
    );
    --sqr-white-3: hsl(
        var(--sqr-white-h)
        var(--sqr-white-s)
        95
    );

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