:root {
    --l-120: -10%;
    --l-110: ;
    --l-100: 0%;
    --l-80: 7%;
    --l-60: 12%;
    --l-40: 18%;
    --l-20: 25%;
    --l-10: 45%;

    --colors-primary-base: 76;
    --colors-primary-saturation: 100%;
    --colors-primary-lightness: 50%;
    --colors-primary-120: hsl(
        var(--colors-primary-base),
        var(--colors-primary-saturation),
        calc(var(--colors-primary-lightness) + var(--l-120))
    );
    --colors-primary-110: hsl(
        var(--colors-primary-base),
        var(--colors-primary-saturation),
        calc(var(--colors-primary-lightness) + var(--l-110))
    );
    --colors-primary-100: hsl(
        var(--colors-primary-base),
        var(--colors-primary-saturation),
        var(--colors-primary-lightness)
    );
    --colors-primary-80: hsl(
        var(--colors-primary-base),
        var(--colors-primary-saturation),
        calc(var(--colors-primary-lightness) + var(--l-80))
    );
    --colors-primary-60: hsl(
        var(--colors-primary-base),
        var(--colors-primary-saturation),
        calc(var(--colors-primary-lightness) + var(--l-60))
    );
    --colors-primary-40: hsl(
        var(--colors-primary-base),
        var(--colors-primary-saturation),
        calc(var(--colors-primary-lightness) + var(--l-40))
    );
    --colors-primary-20: hsl(
        var(--colors-primary-base),
        var(--colors-primary-saturation),
        calc(var(--colors-primary-lightness) + var(--l-20))
    );
    --colors-primary-10: hsl(
        var(--colors-primary-base),
        var(--colors-primary-saturation),
        calc(var(--colors-primary-lightness) + var(--l-10))
    );

    --colors-on-primary-base: 266;
    --colors-on-primary-saturation: 63%;
    --colors-on-primary-lightness: 22%;
    --colors-on-primary-100: hsl(
        var(--colors-on-primary-base),
        var(--colors-on-primary-saturation),
        var(--colors-on-primary-lightness)
    );
    --colors-on-primary-80: hsl(
        var(--colors-on-primary-base),
        var(--colors-on-primary-saturation),
        calc(var(--colors-on-primary-lightness) + var(--l-80))
    );
    --colors-secondary-base: 266;
    --colors-secondary-saturation: 63%;
    --colors-secondary-lightness: 22%;
    --colors-secondary-120: hsl(
        var(--colors-secondary-base),
        var(--colors-secondary-saturation),
        calc(var(--colors-secondary-lightness) + var(--l-120))
    );
    --colors-secondary-100: hsl(
        var(--colors-secondary-base),
        var(--colors-secondary-saturation),
        var(--colors-secondary-lightness)
    );
    --colors-secondary-80: hsl(
        var(--colors-secondary-base),
        var(--colors-secondary-saturation),
        calc(var(--colors-secondary-lightness) + var(--l-80))
    );
    --colors-secondary-60: hsl(
        var(--colors-secondary-base),
        var(--colors-secondary-saturation),
        calc(var(--colors-secondary-lightness) + var(--l-60))
    );

    --colors-on-secondary-base: 76;
    --colors-on-secondary-saturation: 100%;
    --colors-on-secondary-lightness: 50%;
    --colors-on-secondary-100: hsl(
        var(--colors-on-secondary-base),
        var(--colors-on-secondary-saturation),
        var(--colors-on-secondary-lightness)
    );

    --colors-action-base: 280;
    --colors-action-saturation: 74%;
    --colors-action-lightness: 55%;
    --colors-action-120: hsl(
        var(--colors-action-base),
        var(--colors-action-saturation),
        calc(var(--colors-action-lightness) + var(--l-120))
    );
    --colors-action-100: hsl(
        var(--colors-action-base),
        var(--colors-action-saturation),
        var(--colors-action-lightness)
    );
    --colors-action-80: hsl(
        var(--colors-action-base),
        var(--colors-action-saturation),
        calc(var(--colors-action-lightness) + var(--l-80))
    );
    --colors-action-60: hsl(
        var(--colors-action-base),
        var(--colors-action-saturation),
        calc(var(--colors-action-lightness) + var(--l-60))
    );

    --colors-on-action-base: 0;
    --colors-on-action-saturation: 0%;
    --colors-on-action-lightness: 100%;
    --colors-on-action-100: hsl(
        var(--colors-on-action-base),
        var(--colors-on-action-saturation),
        var(--colors-on-action-lightness)
    );

    --colors-accent-base: 76;
    --colors-accent-saturation: 100%;
    --colors-accent-lightness: 50%;
    --colors-accent-100: hsl(
        var(--colors-accent-base),
        var(--colors-accent-saturation),
        var(--colors-accent-lightness)
    );
    --colors-accent-80: hsl(
        var(--colors-accent-base),
        var(--colors-accent-saturation),
        calc(var(--colors-accent-lightness) + var(--l-80))
    );
    --colors-accent-60: hsl(
        var(--colors-accent-base),
        var(--colors-accent-saturation),
        calc(var(--colors-accent-lightness) + var(--l-60))
    );
    --colors-accent-10: hsl(
        var(--colors-accent-base),
        var(--colors-accent-saturation),
        calc(var(--colors-accent-lightness) + var(--l-10))
    );

    --colors-on-accent-base: 266;
    --colors-on-accent-saturation: 63%;
    --colors-on-accent-lightness: 22%;
    --colors-on-accent-100: hsl(
        var(--colors-on-accent-base),
        var(--colors-on-accent-saturation),
        var(--colors-on-accent-lightness)
    );

    --colors-surface-base: 0;
    --colors-surface-saturation: 0%;
    --colors-surface-lightness: 100%;
    --colors-surface-120: hsl(
        var(--colors-surface-base),
        var(--colors-surface-saturation),
        calc(var(--colors-surface-lightness) + var(--l-120))
    );
    --colors-surface-110: hsl(
        var(--colors-surface-base),
        var(--colors-surface-saturation),
        calc(var(--colors-surface-lightness) + var(--l-110))
    );
    --colors-surface-100: hsl(
        var(--colors-surface-base),
        var(--colors-surface-saturation),
        var(--colors-surface-lightness)
    );
    --colors-surface-80: hsl(
        var(--colors-surface-base),
        var(--colors-surface-saturation),
        calc(var(--colors-surface-lightness) + var(--l-80))
    );
    --colors-surface-60: hsl(
        var(--colors-surface-base),
        var(--colors-surface-saturation),
        calc(var(--colors-surface-lightness) + var(--l-60))
    );

    --colors-on-surface-base: 266;
    --colors-on-surface-saturation: 63%;
    --colors-on-surface-lightness: 22%;
    --colors-on-surface-100: hsl(
        var(--colors-on-surface-base),
        var(--colors-on-surface-saturation),
        var(--colors-on-surface-lightness)
    );
    --colors-on-surface-80: hsla(
        var(--colors-on-surface-base),
        var(--colors-on-surface-saturation),
        var(--colors-on-surface-lightness), 0.8
    );
    --colors-on-surface-60: hsla(
        var(--colors-on-surface-base),
        var(--colors-on-surface-saturation),
        var(--colors-on-surface-lightness), 0.6
    );
    --colors-on-surface-40: hsla(
        var(--colors-on-surface-base),
        var(--colors-on-surface-saturation),
        var(--colors-on-surface-lightness), 0.4
    );
    --colors-on-surface-20: hsla(
        var(--colors-on-surface-base),
        var(--colors-on-surface-saturation),
        var(--colors-on-surface-lightness), 0.2
    );
    --colors-on-surface-10: hsla(
        var(--colors-on-surface-base),
        var(--colors-on-surface-saturation),
        var(--colors-on-surface-lightness), 0.1
    );

    --colors-background-base: 0;
    --colors-background-saturation: 0%;
    --colors-background-lightness: 96%;
    --colors-background-120: hsl(
        var(--colors-background-base),
        var(--colors-background-saturation),
        calc(var(--colors-background-lightness) + var(--l-120))
    );
    --colors-background-100: hsl(
        var(--colors-background-base),
        var(--colors-background-saturation),
        var(--colors-background-lightness)
    );
    --colors-background-80: hsl(
        var(--colors-background-base),
        var(--colors-background-saturation),
        calc(var(--colors-background-lightness) + var(--l-80))
    );
    --colors-background-60: hsl(
        var(--colors-background-base),
        var(--colors-background-saturation),
        calc(var(--colors-background-lightness) + var(--l-60))
    );
    --colors-background-40: hsl(
        var(--colors-background-base),
        var(--colors-background-saturation),
        calc(var(--colors-background-lightness) + var(--l-40))
    );
    --colors-background-20: hsl(
        var(--colors-background-base),
        var(--colors-background-saturation),
        calc(var(--colors-background-lightness) + var(--l-20))
    );

    --colors-on-background-base: 266;
    --colors-on-background-saturation: 63%;
    --colors-on-background-lightness: 22%;
    --colors-on-background-100: hsl(
        var(--colors-on-background-base),
        var(--colors-on-background-saturation),
        var(--colors-on-background-lightness)
    );
    --colors-on-background-80: hsla(
        var(--colors-on-background-base),
        var(--colors-on-background-saturation),
        var(--colors-on-background-lightness), 0.8
    );
    --colors-on-background-60: hsla(
        var(--colors-on-background-base),
        var(--colors-on-background-saturation),
        var(--colors-on-background-lightness), 0.6
    );
    --colors-on-background-40: hsla(
        var(--colors-on-background-base),
        var(--colors-on-background-saturation),
        var(--colors-on-background-lightness), 0.4
    );
    --colors-on-background-20: hsla(
        var(--colors-on-background-base),
        var(--colors-on-background-saturation),
        var(--colors-on-background-lightness), 0.2
    );
    --colors-on-background-10: hsla(
        var(--colors-on-background-base),
        var(--colors-on-background-saturation),
        var(--colors-on-background-lightness), 0.1
    );

    --colors-inactive-base: 0;
    --colors-inactive-saturation: 0%;
    --colors-inactive-lightness: 79%;
    --colors-inactive-120: hsl(
        var(--colors-inactive-base),
        var(--colors-inactive-saturation),
        calc(var(--colors-inactive-lightness)  + var(--l-120))
    );
    --colors-inactive-100: hsl(
        var(--colors-inactive-base),
        var(--colors-inactive-saturation),
        var(--colors-inactive-lightness)
    );
    --colors-inactive-80: hsl(
        var(--colors-inactive-base),
        var(--colors-inactive-saturation),
        calc(var(--colors-inactive-lightness) + var(--l-80))
    );

    --colors-on-inactive-base: 0;
    --colors-on-inactive-saturation: 0%;
    --colors-on-inactive-lightness: 100%;
    --colors-on-inactive-100: hsl(
        var(--colors-on-inactive-base),
        var(--colors-on-inactive-saturation),
        var(--colors-on-inactive-lightness)
    );

    --colors-success-base: 132;
    --colors-success-saturation: 73%;
    --colors-success-lightness: 41%;
    --colors-success-120: hsl(
        var(--colors-success-base),
        calc(var(--colors-success-saturation) - 2%),
        calc(var(--colors-success-lightness)  + var(--l-120))
    );
    --colors-success-100: hsl(
        var(--colors-success-base),
        var(--colors-success-saturation),
        var(--colors-success-lightness)
    );
    --colors-success-80: hsl(
        var(--colors-success-base),
        calc(var(--colors-success-saturation) - 20%),
        calc(var(--colors-success-lightness) + var(--l-80))
    );
    --colors-success-60: hsl(
        var(--colors-success-base),
        calc(var(--colors-success-saturation) - 23%),
        calc(var(--colors-success-lightness) + var(--l-60))
    );
    --colors-success-40: hsl(
        var(--colors-success-base),
        calc(var(--colors-success-saturation) - 23%),
        calc(var(--colors-success-lightness) + var(--l-40))
    );
    --colors-success-20: hsl(
        var(--colors-success-base),
        calc(var(--colors-success-saturation) - 23%),
        calc(var(--colors-success-lightness) + var(--l-20))
    );
    --colors-success-10: hsl(
        var(--colors-success-base),
        calc(var(--colors-success-saturation) - 25%),
        calc(var(--colors-success-lightness) + var(--l-10))
    );

    --colors-on-success-base: 0;
    --colors-on-success-saturation: 0%;
    --colors-on-success-lightness: 100%;
    --colors-on-success-100: hsl(
        var(--colors-on-success-base),
        var(--colors-on-success-saturation),
        var(--colors-on-success-lightness)
    );

    --colors-error-base: 0;
    --colors-error-saturation: 100%;
    --colors-error-lightness: 35%;
    --colors-error-120: hsl(
        var(--colors-error-base),
        var(--colors-error-saturation),
        calc(var(--colors-error-lightness) + var(--l-120))
    );
    --colors-error-100: hsl(
        var(--colors-error-base),
        var(--colors-error-saturation),
        var(--colors-error-lightness)
    );
    --colors-error-80: hsla(
        var(--colors-error-base),
        var(--colors-error-saturation),
        var(--colors-error-lightness), 0.8
    );
    --colors-error-60: hsla(
        var(--colors-error-base),
        var(--colors-error-saturation),
        var(--colors-error-lightness), 0.6
    );
    --colors-error-40: hsla(
        var(--colors-error-base),
        var(--colors-error-saturation),
        var(--colors-error-lightness), 0.4
    );
    --colors-error-20: hsla(
        var(--colors-error-base),
        var(--colors-error-saturation),
        var(--colors-error-lightness), 0.2
    );
    --colors-error-10: hsla(
        var(--colors-error-base),
        var(--colors-error-saturation),
        var(--colors-error-lightness), 0.1
    );

    --colors-on-error-base: 0;
    --colors-on-error-saturation: 0%;
    --colors-on-error-lightness: 100%;
    --colors-on-error-100: hsl(
        var(--colors-on-error-base),
        var(--colors-on-error-saturation),
        var(--colors-on-error-lightness) 
    );

    --colors-warning-base: 32;
    --colors-warning-saturation: 100%;
    --colors-warning-lightness: 50%;
    --colors-warning-120: hsl(
        var(--colors-warning-base),
        var(--colors-warning-saturation),
        calc(var(--colors-warning-lightness) + var(--l-120))
    );
    --colors-warning-100: hsl(
        var(--colors-warning-base),
        var(--colors-warning-saturation),
        var(--colors-warning-lightness) 
    );
    --colors-warning-80: hsl(
        var(--colors-warning-base),
        var(--colors-warning-saturation),
        calc(var(--colors-warning-lightness) + var(--l-80))
    );
    --colors-warning-60: hsl(
        var(--colors-warning-base),
        var(--colors-warning-saturation),
        calc(var(--colors-warning-lightness) + var(--l-60))
    );
    --colors-warning-40: hsl(
        var(--colors-warning-base),
        var(--colors-warning-saturation),
        calc(var(--colors-warning-lightness) + var(--l-40))
    );
    --colors-warning-20: hsl(
        var(--colors-warning-base),
        var(--colors-warning-saturation),
        calc(var(--colors-warning-lightness) + var(--l-20))
    );
    --colors-warning-10: hsl(
        var(--colors-warning-base),
        var(--colors-warning-saturation),
        calc(var(--colors-warning-lightness) + var(--l-10))
    );
    
    --colors-on-warning-base: 0;
    --colors-on-warning-saturation: 0%;
    --colors-on-warning-lightness: 100%;
    --colors-on-warning-100: hsl(
        var(--colors-on-warning-base),
        var(--colors-on-warning-saturation),
        var(--colors-on-warning-lightness)
    );
}