/*
 * Палитра
 */
:root {
    --color-white: #fff;
    --color-black: #101010;

    --color-gray-100: #f1f1f1;
    --color-gray-200: #ccc;
    --color-gray-300: #a1a1a1;
    --color-gray-400: #505050;
    --color-gray-500: #333;

    --color-blue-light: #82c8e5;
    --color-blue: #0692cc;
    --color-blue-dark: #0575a3;

    --color-green: #0ba961;
    --color-green-dark: #09874e;

    --color-pink: #ffebeb;
    --color-red-light: #ee9595;
    --color-red: #e34e4e;
    --color-yellow-light: #fcfbeb;
    --color-yellow: #fffbc2;
}
/*
 * Цветовая схема для основного контента (светлая)
 */
.colorscheme_default {
    /*
     * Фон и разделители
     */
    --color-content-bg: var(--color-white);
    --color-content-overlay: #10101088;
    --color-content-separator: var(--color-gray-100);
    --color-content-border: var(--color-gray-200);

    /*
     * Текст
     */
    --color-text-default: var(--color-gray-400);
    --color-text-weak: var(--color-gray-300);
    --color-text-strong: var(--color-black);

    /*
     * Ссылки
     */
    --color-link: #07557c;
    --color-link-decoration: #07557c;
    --color-link-hover: #07557c;
    --color-link-alt: none;
    --color-link-alt-decoration: none;

    /*
     * Основной брендовый цвет
     */
    --color-brand-bg: #2e4d68;
    --color-brand-text: var(--color-gray-100);

    /*
     * Дополнительные цвета
     */
    --color-underlay-bg: var(--color-gray-100);
    --color-underlay-text: var(--color-gray-400);
    --color-underlay-separator: var(--color-gray-200);

    --color-info-bg: var(--color-blue);
    --color-info-text: var(--color-white);

    --color-notice-bg: var(--color-yellow);
    --color-notice-text: var(--color-text-strong);

    --color-alert-bg: var(--color-pink);
    --color-alert-text: var(--color-text-strong);

    --color-error-bg: var(--color-red);
    --color-error-text: var(--color-white);

    /*
     * Состояния
     */
    --color-state-inactive: var(--color-gray-200);
    --color-state-error: var(--color-red);

    /*
     * Кнопки
     */
    --color-button-bg: var(--color-gray-400);
    --color-button-active-bg: #404040;
    --color-button-disabled-bg: var(--color-state-inactive);

    /*
     * Элементы управления
     */
    --color-input-bg: var(--color-white);
    --color-input-border: var(--color-content-border);
    --color-input-focus-bg: none;
    --color-input-focus-text: none;

    /*
     * Главное меню
     */
    --color-menu-text: var(--color-gray-500);
    --color-menu-separator: var(--color-gray-200);

    --color-menu-open-bg: var(--color-brand-bg);
    --color-menu-open-text: var(--color-brand-text);

    --bg-menu-sub-1: var(--color-white);
    --bg-menu-sub-2: var(--color-white);
    --color-menu-sub-open-bg: var(--color-brand-bg);
    --color-menu-sub-open-text: var(--color-brand-text);

    /*
     * Фильтры
     */
    --color-filter-slider: #4580aa;
}

/*
 * Черная цветовая схема
 */
.colorscheme_black {
    --color-red: #a30c0c;

    /*
     * Фон и разделители
     */
    --color-content-bg: var(--color-black);
    --color-content-overlay: #10101080;
    --color-content-separator: #303030;
    --color-content-border: #303030;

    /*
     * Текст
     */
    --color-text-default: var(--color-gray-300);
    --color-text-weak: var(--color-gray-400);
    --color-text-strong: var(--color-gray-100);

    /*
     * Ссылки
     */
    --color-link: var(--color-gray-100);
    --color-link-decoration: var(--color-gray-400);
    --color-link-alt: var(--color-gray-300);
    --color-link-alt-decoration: var(--color-gray-400);

    /*
     * Основной брендовый цвет
     */
    --color-brand-bg: #2e4d68;
    --color-brand-text: var(--color-gray-100);

    /*
     * Дополнительные цвета
     */
    --color-underlay-bg: #303030;
    --color-underlay-text: var(--color-gray-200);
    --color-underlay-separator: none;

    --color-info-bg: #2e4d68;
    --color-info-text: var(--color-gray-100);

    --color-alert-bg: var(--color-red);
    --color-alert-text: var(--color-gray-100);

    --color-error-bg: none;
    --color-error-text: none;

    /*
     * Состояния
     */
    --color-state-inactive: none;
    --color-state-error: var(--color-red);

    /*
     * Кнопки
     */
    --color-button-bg: none;
    --color-button-disabled-bg: none;

    /*
     * Элементы управления
     */
    --color-input-bg: #303030;
    --color-input-border: var(--color-gray-400);
    --color-input-focus-bg: var(--color-white);
    --color-input-focus-text: var(--color-gray-400);

    /*
     * Главное меню
     */
    --color-menu-text: var(--color-text-strong);
    --color-menu-separator: var(--color-content-separator);

    --color-menu-open-bg: var(--color-underlay-bg);
    --color-menu-open-text: var(--color-text-strong);

    --bg-menu-sub-1: linear-gradient(to bottom, var(--color-gray-400), #252525) var(--color-gray-400);
    --bg-menu-sub-2: linear-gradient(to top, var(--color-gray-400), #252525) #252525;
    --color-menu-sub-open-bg: var(--color-brand-bg);
    --color-menu-sub-open-text: var(--color-brand-text);

    /*
     * Пользовательское меню
     */
    --bg-usermenu: linear-gradient(to bottom, var(--color-gray-400), #252525) var(--color-gray-400);
    --color-usermenu-text: var(--color-underlay-text);

    /*
     * Цвета специфические для этой схемы
     */
    --bg-header-user: linear-gradient(to right, #252525, #303030) #252525;
    --bg-header-glow: radial-gradient(circle at 135px 60px, #3d3d3d, rgba(255, 255, 255, 0) 130px) scroll no-repeat left center var(--color-content-bg);
    --bg-header-glow-mobile: radial-gradient(circle at center center, #3d3d3d, rgba(255, 255, 255, 0) 200px) scroll no-repeat left center var(--color-content-bg);

    /*
     * TODO: сделать условия только для старых Safari
     */
    --bg-header-glow: -webkit-gradient(radial, 135 60%, 5, 135 60%, 130, from(#3d3d3d), to(rgba(255, 255, 255, 0))) scroll no-repeat left center var(--color-content-bg);
    --bg-header-glow-mobile: -webkit-gradient(radial, center 60%, 5, center 60%, 200, from(#3d3d3d), to(rgba(255, 255, 255, 0))) scroll no-repeat left center var(--color-content-bg);
}

/*
 * Серая цветовая схема
 */
.colorscheme_gray {
    /*
     * Фон и разделители
     */
    --color-content-bg: #303030;
    --color-content-overlay: #303030e6;
    --color-content-separator: var(--color-gray-400);
    --color-content-border: var(--color-gray-400);

    /*
     * Текст
     */
    --color-text-default: var(--color-gray-300);
    --color-text-weak: var(--color-gray-400);
    --color-text-strong: var(--color-gray-100);

    /*
     * Ссылки
     */
    --color-link: var(--color-gray-100);
    --color-link-decoration: var(--color-gray-400);
    --color-link-alt: var(--color-gray-300);
    --color-link-alt-decoration: var(--color-gray-400);

    /*
     * Основной брендовый цвет
     */
    --color-brand-bg: #2e4d68;
    --color-brand-text: var(--color-gray-100);

    /*
     * Дополнительные цвета
     */
    --color-underlay-bg: var(--color-black);
    --color-underlay-text: var(--color-gray-200);
    --color-underlay-separator: none;

    --color-info-bg: #2e4d68;
    --color-info-text: var(--color-gray-100);

    --color-alert-bg: none;
    --color-alert-text: none;

    --color-error-bg: none;
    --color-error-text: none;

    /*
     * Состояния
     */
    --color-state-inactive: none;
    --color-state-error: var(--color-red);

    /*
     * Кнопки
     */
    --color-button-bg: var(--color-gray-400);
    --color-button-active-bg: #404040;
    --color-button-disabled-bg: var(--color-state-inactive);

    /*
     * Элементы управления
     */
    --color-input-bg: #303030;
    --color-input-border: var(--color-gray-400);
    --color-input-focus-bg: var(--color-white);
    --color-input-focus-text: var(--color-gray-400);

    /*
     * Главное меню
     */
    --color-menu-text: var(--color-text-strong);
    --color-menu-separator: var(--color-content-separator);

    --color-menu-open-bg: var(--color-underlay-bg);
    --color-menu-open-text: var(--color-text-strong);

    --bg-menu-sub-1: linear-gradient(to bottom, var(--color-gray-500), #252525) var(--color-gray-500);
    --bg-menu-sub-2: linear-gradient(to top, var(--color-gray-500), #252525) #252525;
    --color-menu-sub-open-bg: var(--color-brand-bg);
    --color-menu-sub-open-text: var(--color-brand-text);
    --bg-menu-important: var(--color-gray-400);

    /*
     * Пользовательское меню
     */
    --bg-usermenu: linear-gradient(to bottom, var(--color-gray-500), #252525) var(--color-gray-500);
    --color-usermenu-text: var(--color-underlay-text);
}