:root {
    /* Базовые цвета, от которых выстраивается вся палитра */
    --color-base-base: #48484a; /* Базовый цвет содержимого, от которого выстраиваются цвета текста, иконок, ... */
    --color-base-essential: #fff; /* Базовый цвет поверхностей */
    --color-base-project: #472f92; /* Проектный цвет, от которого выстраивают акцентные состояния */
    --color-base-phantom: #8d6c7e; /* Тонирующий цвет, от которого выстраиватся бордеры, оверлей под модальными окнами, ... */
    --color-base-path: #5856d6; /* Цвет ссылок и контролов, от которого выстраиваются все их состояния */
    --color-base-system: #ced8de; /* Цвет системнный */

    --color-base-success: #62bb46; /* Цвет успеха */
    --color-base-alert: #eb5757; /* Цвет ошибки */
    --color-base-warning: #f38b00; /* Цвет предупреждения */
    --color-base-caution: #f2c94c; /* Цвет осторожности */
    --color-base-normal: #56b9f2; /* Цвет нейтральный */
    --color-base-critical: #33000f;
}

/* stylelint-disable */
.Theme_color_themeMaterialLight {
    /* Цвета фонов */
    --color-bg-default: var(--color-base-essential); /* Цвет дефолта */
    --color-bg-secondary: #f2f2f7; /* Цвет дефолта */
    --color-bg-brand: var(--color-base-project); /* Цвет фона брендированый */
    --color-bg-link: color-mod(var(--color-base-path) a(100%)); /* Цвет фона ссылки */
    --color-bg-border: color-mod(var(--color-base-phantom) a(20%) l(+30%)); /* Цвет границ */
    --color-bg-stripe: #f8f9fa; /* Цвет зебры (например, при окрашивании фона строк таблицы через одну) */
    --color-bg-stripe-active: color-mod(#f8f9fa l(-2%));

    --color-bg-ghost: color-mod(var(--color-base-phantom) l(-11%) a(8%)); /* Цвет затенения */
    --color-bg-tone: color-mod(var(--color-base-phantom) l(-25%) a(10%)); /* Цвет паранджи */
    --color-bg-soft: color-mod(var(--color-base-essential) a(90%)); /* Цвет молока */
    --color-bg-system: color-mod(var(--color-base-system) a(100%)); /* Цвет фона системнный */
    --color-bg-normal: color-mod(var(--color-base-normal) a(100%)); /* Цвет фона нейтральный */
    --color-bg-success: color-mod(var(--color-base-success) a(100%)); /* Цвет фона успеха */
    --color-bg-caution: color-mod(var(--color-base-caution) a(100%)); /* Цвет фона осторожности */
    --color-bg-warning: color-mod(var(--color-base-warning) a(100%)); /* Цвет фона предупреждения */
    --color-bg-alert: color-mod(var(--color-base-alert) a(100%)); /* Цвет фона ошибки */
    --color-bg-critical: color-mod(var(--color-base-critical) a(100%)); /* Цвет фона системнный */
    --color-bg-selection: color-mod(var(--color-base-project) a(10%)); /* Цвет выделения */

    /* Цвета текста */
    --color-typo-primary: var(--color-base-base); /* Цвет основного текста */
    --color-typo-secondary: color-mod(
        var(--color-base-base) a(70%)
    ); /* Цвет второстепенного текста */
    --color-typo-ghost: color-mod(var(--color-base-base) a(30%)); /* Цвет дополнительного текста */
    --color-typo-brand: color-mod(var(--color-base-project) a(100%)); /* Цвет брендового текста */
    --color-typo-system: color-mod(
        var(--color-base-system) s(+10%) l(-21%)
    ); /* Цвет фона системнный */
    --color-typo-normal: color-mod(
        var(--color-base-normal) s(+14%) l(-4%)
    ); /* Цвет фона нейтральный */
    --color-typo-success: color-mod(
        var(--color-base-success) s(+20%) l(-8%)
    ); /* Цвет текста успеха */
    --color-typo-caution: color-mod(
        var(--color-base-caution) s(+15%) h(-8) l(-10%)
    ); /* Цвет текста осторожности */

    --color-typo-warning: color-mod(
        var(--color-base-warning) h(-4) s(-2%) l(-2%)
    ); /* Цвет текста предупреждения */

    --color-typo-alert: color-mod(var(--color-base-alert) s(+3%) l(-7%)); /* Цвет текста ошибки */
    --color-typo-critical: color-mod(var(--color-base-critical) a(100%)); /* Цвет фона системнный */
    --color-typo-link: color-mod(var(--color-base-path) a(100%)); /* Цвет основной ссылки */

    --color-typo-link-minor: color-mod(
        var(--color-base-path) s(-35%) l(-10%)
    ); /* Цвет второстепенной ссылки */
    --color-typo-link-hover: color-mod(var(--color-base-path) l(+8%)); /* Цвет ховера ссылки */
    --color-nums-shadow: 0, 0, 0; /* Значения RGB для указания теней в конструкции rgba(R,G,B, alpha) */

    /* Цвета скроллбара */
    --color-scroll-bg: color-mod(var(--color-base-phantom) a(6%));
    --color-scroll-thumb: color-mod(var(--color-base-phantom) a(24%));
    --color-scroll-thumb-hover: color-mod(var(--color-base-phantom) a(32%));

    /* Цвета контролов */
    /* Default */
    --color-control-bg-default: color-mod(var(--color-base-essential)); /* Цвет фона контрола */
    --color-control-typo-default: color-mod(
        var(--color-base-base)
    ); /* Цвет основного текста контрола */
    --color-control-typo-placeholder: color-mod(
        var(--color-base-base) a(35%)
    ); /* Цвет плейсхолдера контрола */
    --color-control-bg-border-default: color-mod(
        var(--color-base-phantom) a(28%)
    ); /* Цвет фона бордеров котрола */

    --color-control-bg-border-default-hover: color-mod(
        var(--color-base-phantom) a(52%)
    ); /* Цвет фона бордеров контрола по ховеру */

    --color-control-bg-border-focus: color-mod(
        var(--color-base-path) l(+9%)
    ); /* Цвет аутлайна контролов при фокусе */
    --color-control-bg-focus: color-mod(
        var(--color-base-path) a(30%)
    ); /* Цвет тени в состонии фокуса */
    --color-control-bg-active: color-mod(
        var(--color-base-path) a(50%)
    ); /* Цвет тени в состонии нажатия  */

    /* Primary */
    --color-control-bg-primary: color-mod(
        var(--color-base-path) a(100%)
    ); /* Цвет фона активного контрола */
    --color-control-bg-primary-hover: color-mod(
        var(--color-base-path) l(+9%)
    ); /* Цвет фона активного контрола по ховеру */

    --color-control-typo-primary: color-mod(
        var(--color-base-base) l(+100%)
    ); /* Цвет акцентного текста */
    --color-control-typo-primary-hover: color-mod(
        var(--color-base-base) l(+100%)
    ); /* Цвет акцентного текста */

    /* Secondary */
    --color-control-bg-secondary: color-mod(
        var(--color-base-essential) a(0%)
    ); /* Цвет фона бордеров котрола */
    --color-control-bg-border-secondary: color-mod(
        var(--color-base-path) a(100%)
    ); /* Цвет фона бордеров котрола */

    --color-control-bg-border-secondary-hover: color-mod(
        var(--color-base-path) l(+9%)
    ); /* Цвет фона бордеров контрола по ховеру */

    --color-control-typo-secondary: color-mod(
        var(--color-base-path) a(100%)
    ); /* Цвет второстепеного текста контрола */

    --color-control-typo-secondary-hover: color-mod(
        var(--color-base-path) l(+9%)
    ); /* Цвет акцентного текста */

    /* Ghost */
    --color-control-bg-ghost: color-mod(
        var(--color-base-phantom) a(7%)
    ); /* Цвет фона дополнительного контрола */

    --color-control-bg-ghost-hover: color-mod(
        var(--color-base-phantom) a(5%)
    ); /* Цвет фона дополнительного контрола по ховеру */

    --color-control-typo-ghost: color-mod(
        var(--color-base-base) h(+1) l(+8%) a(80%)
    ); /* Цвет дополнительного текста контрола */

    --color-control-typo-ghost-hover: color-mod(
        var(--color-base-base) h(+1) l(+8%) a(75%)
    ); /* Цвет акцентного текста */

    /* Clear */
    --color-control-bg-clear: color-mod(
        var(--color-base-phantom) a(0%)
    ); /* Цвет фона чистого контрола */
    --color-control-bg-clear-hover: color-mod(
        var(--color-base-phantom) a(5%)
    ); /* Цвет фона чистого контрола по ховеру */

    --color-control-typo-clear: color-mod(
        var(--color-base-base) h(+1) l(+8%) a(80%)
    ); /* Цвет акцентного текста */

    --color-control-typo-clear-hover: color-mod(
        var(--color-base-base) h(+1) l(+8%) a(75%)
    ); /* Цвет акцентного текста */

    /* Disable */
    --color-control-bg-disable: color-mod(
        var(--color-base-phantom) a(7%)
    ); /* Цвет фона неактивного контрола */
    --color-control-bg-border-disable: color-mod(
        var(--color-base-phantom) a(0%)
    ); /* Цвет фона бордеров неактивного контрола */

    --color-control-typo-disable: color-mod(
        var(--color-base-base) a(26%)
    ); /* Цвет основного текста неактивного контрола */
}
/* stylelint-enable */
