:root {

    --kit-color-error-w5: hsl(0, 100%, 80%);
    --kit-color-error-w4: hsl(0, 100%, 75%);
    --kit-color-error-w3: hsl(0, 100%, 70%);
    --kit-color-error-w2: hsl(0, 100%, 65%);
    --kit-color-error-w1: hsl(0, 100%, 60%);
    --kit-color-error: hsl(0, 100%, 55%);
    --kit-color-error-b1: hsl(0, 100%, 48%);
    --kit-color-error-b2: hsl(0, 100%, 41%);
    --kit-color-error-b3: hsl(0, 100%, 34%);
    --kit-color-error-b4: hsl(0, 100%, 30%);
    --kit-color-error-b5: hsl(0, 100%, 25%);

    --kit-color-error-text: #FFF;

    --kit-color-warning-w5: hsl(36, 94%, 80%);
    --kit-color-warning-w4: hsl(36, 94%, 75%);
    --kit-color-warning-w3: hsl(36, 94%, 70%);
    --kit-color-warning-w2: hsl(36, 94%, 65%);
    --kit-color-warning-w1: hsl(36, 94%, 60%);
    --kit-color-warning: hsl(36, 94%, 55%);
    --kit-color-warning-b1: hsl(36, 94%, 50%);
    --kit-color-warning-b2: hsl(36, 94%, 45%);
    --kit-color-warning-b3: hsl(36, 94%, 40%);
    --kit-color-warning-b4: hsl(36, 94%, 35%);
    --kit-color-warning-b5: hsl(36, 94%, 30%);


    --kit-color-success-w5: hsl(128, 45%, 80%);
    --kit-color-success-w4: hsl(128, 45%, 75%);
    --kit-color-success-w3: hsl(128, 45%, 70%);
    --kit-color-success-w2: hsl(128, 45%, 65%);
    --kit-color-success-w1: hsl(128, 45%, 60%);
    --kit-color-success: hsl(128, 45%, 55%);
    --kit-color-success-b1: hsl(128, 45%, 50%);
    --kit-color-success-b2: hsl(128, 45%, 45%);
    --kit-color-success-b3: hsl(128, 45%, 40%);
    --kit-color-success-b4: hsl(128, 45%, 35%);
    --kit-color-success-b5: hsl(128, 45%, 30%);


    --kit-color-readonly-w2: hsl(0, 0%, 65%);
    --kit-color-readonly-w1: hsl(0, 0%, 60%);
    --kit-color-readonly: hsl(0, 0%, 55%);
    --kit-color-readonly-b1: hsl(0, 0%, 50%);
    --kit-color-readonly-b2: hsl(0, 0%, 45%);



    --kit-color-content: hsl(0, 0%, 100%);
    --kit-color-content-b1: hsl(0, 0%, 97%);
    --kit-color-content-b2: hsl(0, 0%, 94%);
    --kit-color-content-b3: hsl(0, 0%, 91%);
    --kit-color-content-b4: hsl(0, 0%, 88%);
    --kit-color-content-b5: hsl(0, 0%, 85%);

    --kit-color-text-w3: #404040;
    --kit-color-text-w2: #333333;
    --kit-color-text-w1: #262626;
    --kit-color-text: #1a1a1a;

    --kit-color: #1a1a1a;
    --kit-color-text-hover: var(--kit-color-primary);

    --kit-color-primary-w5: hsl(210, 100%, 85%);
    --kit-color-primary-w4: hsl(210, 100%, 80%);
    --kit-color-primary-w3: hsl(210, 100%, 70%);
    --kit-color-primary-w2: hsl(210, 100%, 65%);
    --kit-color-primary-w1: hsl(210, 100%, 60%);
    --kit-color-primary: hsl(210, 100%, 55%);
    --kit-color-primary-b1: hsl(210, 100%, 50%);
    --kit-color-primary-b2: hsl(210, 100%, 45%);
    --kit-color-primary-b3: hsl(210, 100%, 40%);
    --kit-color-primary-b4: hsl(210, 100%, 35%);
    --kit-color-primary-b5: hsl(210, 100%, 30%);
    --kit-color-primary-text: #FFF;

    --kit-color-secondary-w5: hsl(0, 0%, 80%);
    --kit-color-secondary-w4: hsl(0, 0%, 75%);
    --kit-color-secondary-w3: hsl(0, 0%, 70%);
    --kit-color-secondary-w2: hsl(0, 0%, 65%);
    --kit-color-secondary-w1: hsl(0, 0%, 60%);
    --kit-color-secondary: hsl(0, 0%, 55%);
    --kit-color-secondary-b1: hsl(0, 0%, 50%);
    --kit-color-secondary-b2: hsl(0, 0%, 45%);
    --kit-color-secondary-b3: hsl(0, 0%, 40%);
    --kit-color-secondary-b4: hsl(0, 0%, 35%);
    --kit-color-secondary-b5: hsl(0, 0%, 30%);

    --kit-color-secondary-text: #FFF;

    --font-size: 16px;
    --kit-color-icon: #DADADA;
    --kit-color-icon-hover: #b6b6b6;
    --kit-color-placeholder: #b1b1b1;
    --kit-font-family: 'Roboto', Arial, sans-serif;


}