html {

    --blue-50: hsl(244, 100%, 98%);
    --blue-100: hsl(244, 100%, 95%);
    --blue-200: hsl(244, 100%, 90%);
    --blue-300: hsl(244, 100%, 85%);
    --blue-400: hsl(244, 100%, 75%);
    --blue-500: hsl(244, 100%, 65%); 
    --blue-600: hsl(244, 100%, 55%);
    --blue-700: hsl(244, 100%, 45%);
    --blue-800: hsl(244, 100%, 40%);
    --blue-900: hsl(244, 100%, 35%);



    --red-50: hsl(350, 100%, 98%);
    --red-100: hsl(350, 100%, 95%);
    --red-200: hsl(350, 100%, 90%);
    --red-300: hsl(350, 100%, 85%);
    --red-400: hsl(350, 100%, 80%);
    --red-500: hsl(350, 75%, 50%); 
    --red-600: hsl(350, 75%, 45%);
    --red-700: hsl(350, 75%, 40%);
    --red-800: hsl(350, 75%, 35%);
    --red-900: hsl(350, 75%, 30%);


    --grey-50: hsl(0, 0%, 98%);
    --grey-100: hsl(0.00,0.00%,93.33%);
    --grey-200: hsl(0.00,0.00%,87.84%);
    --grey-300: hsl(0.00,0.00%,74.12%);
    --grey-400: hsl(0.00,0.00%,61.96%);
    --grey-500: hsl(0.00,0.00%,45.88%);
    --grey-600: hsl(0.00,0.00%,38.04%);
    --grey-700: hsl(0.00,0.00%,25.88%);
    --grey-800: hsl(0.00,0.00%,12.94%);
    --grey-900: hsl(0.00,0.00%,5%);
    
    
    --main-color: var(--blue-500);

    --main-color-o50: hsla(244, 100%, 65%, 50%);
    --main-color-o75: hsla(244, 100%, 65%, 75%);

    /* um schwarze svg nach main-color zu färben https://isotropic.co/tool/hex-color-to-css-filter/*/
    --filter-main-color: invert(13%) sepia(96%) saturate(6259%) hue-rotate(249deg) brightness(95%) contrast(114%);
}

:root {
    --col-disabled: var(--grey-500);
}