:root {
    --color-black: #000000;
    --color-neutral-50: #f6f7f8;
    --color-neutral-400: #cdcdcd;
    --color-neutral-600: #888;
    --color-neutral-700: #7a8a99;
    --color-brand-primary: #2a3647;
    --color-brand-accent: #29abe2;
    --color-brand-soft: #b5c6db;
    --color-status-success: #27ae60;
    --color-status-warning: #f39c12;
    --color-status-danger: #e74c3c;
    --width-sidebar: 230px;
    --height-sidebar-mobile: 100px;
    --padding-header-x: 40px;
    --padding-header-y: 20px;
    --content-limit: calc(1440px - var(--width-sidebar));
    --content-limit-header: calc(var(--content-limit) - var(--padding-header-x) * 2);
    --distance-bottom-main-sides: 50px;
    --input-focus-border: var(--color-brand-accent);
}

@media (max-width: 1200px) {
    :root {
        --padding-left-content-to-sidebar: 30px;
        --width-sidebar: 175px;
    }
}

@media (max-width: 850px) {
    :root {
        --content-limit-header: 100%;
        --content-limit: 100%;
    }
}