/********************* 
 * Z5 Colors - Triadic
 *
 * 3 Color Scheme
 *
 * Triadic colors are evenly spaced by 120° 
 * on the color wheel.
 * 
 * HSL NOTES:
 * OLD hsl = hsl(val, val, val, .9)
 * NEW hsl = hsl(val val val / 9) 
 *
 *
 *
 */


:root {

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

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


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

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


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

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


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


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

    --tri-dark-2: hsl(
        var(--tri-dark-h) 
        var(--tri-dark-l) 
        15
    );
    --tri-dark-3: hsl(
        var(--tri-dark-h) 
        var(--tri-dark-l) 
        25
    );

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

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

    --tri-light-2: hsl(
        var(--tri-light-h) 
        var(--tri-light-l) 
        97
    );
    --tri-light-3: hsl(
        var(--tri-light-h) 
        var(--tri-light-l) 
        95
    );

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