/* Данный файлик нужно подложить в корень статики */

:root {
    /* Common */
    --color-white: #FFFFFF;
    --color-dark: #000000;

    /* Indigo */
    --color-indigo-200: #364FC7;
    --color-indigo-100: #4C6EF5;
    --color-indigo-80:  rgba(76, 110, 245, 0.8);
    --color-indigo-64:  rgba(76, 110, 245, 0.64);
    --color-indigo-48:  rgba(76, 110, 245, 0.48);
    --color-indigo-24:  rgba(76, 110, 245, 0.24);
    --color-indigo-8:   rgba(76, 110, 245, 0.08);

    /* Error */
    --color-error-200: #C92A2A;
    --color-error-100: #FA5252;
    --color-error-80:  rgba(250, 82, 82, 0.8);
    --color-error-64:  rgba(250, 82, 82, 0.64);
    --color-error-48:  rgba(250, 82, 82, 0.48);
    --color-error-24:  rgba(250, 82, 82, 0.24);
    --color-error-8:   rgba(250, 82, 82, 0.08);

    /* Neutrals Day */
    --color-neutrals-day-1000: #070717;
    --color-neutrals-day-900:  #101025;
    --color-neutrals-day-800:  #292940;
    --color-neutrals-day-700:  #53546E;
    --color-neutrals-day-600:  #87879B;
    --color-neutrals-day-500:  #AEAEBC;
    --color-neutrals-day-400:  #D6D6DF;
    --color-neutrals-day-300:  #E8E8EF;
    --color-neutrals-day-200:  #F4F4F8;
    --color-neutrals-day-100:  #FBFBFC;
    --color-neutrals-day-0:    #FFFFFF;
}

body[data-theme='light'] {
    /* COMMON */
    --color-background: var(--color-neutrals-day-0);
    --color-background-alt: var(--color-neutrals-day-100);

    --color-border: var(--color-neutrals-day-300);

    --color-label-font: var(--color-neutrals-day-900);
    --color-text-font: var(--color-neutrals-day-700);
    --color-textfield-background: var(--color-neutrals-day-0);

    --color-link: var(--color-indigo-100);

    --color-tag-hover-background: var(--color-indigo-64);
    --color-tag-active-background: var(--color-indigo-64);

    /* button default */
    --color-button-default-font: var(--color-indigo-100);
    --color-button-default-border: var(--color-indigo-100);
    --color-button-default-background: var(--color-background);

    --color-button-default-hover-font: var(--color-neutrals-day-0);
    --color-button-default-hover-border: var(--color-indigo-80);
    --color-button-default-hover-background: var(--color-indigo-80);

    --color-button-default-disabled-font: var(--color-indigo-64);
    --color-button-default-disabled-border: var(--color-indigo-64);
    --color-button-default-disabled-background: var(--color-neutrals-day-0);

    /* button primary */
    --color-button-primary-font: var(--color-neutrals-day-0);
    --color-button-primary-border: var(--color-indigo-100);
    --color-button-primary-background: var(--color-indigo-100);

    --color-button-primary-hover-font: var(--color-neutrals-day-0);
    --color-button-primary-hover-border: var(--color-indigo-80);
    --color-button-primary-hover-background: var(--color-indigo-80);

    --color-button-primary-disabled-font: var(--color-neutrals-day-0);
    --color-button-primary-disabled-border: var(--color-indigo-64);
    --color-button-primary-disabled-background: var(--color-indigo-64);

    /* form control */
    --color-form-control-font: var(--color-neutrals-day-900);
    --color-form-control-border: var(--color-neutrals-day-300);
    --color-form-control-background: var(--color-neutrals-day-0);

    --color-form-control-focus-font: var(--color-neutrals-day-900);
    --color-form-control-focus-border: var(--color-indigo-100);
    --color-form-control-focus-background: var(--color-neutrals-day-0);
    --color-form-control-focus-shadow: none;

    --color-form-control-disabled-font: var(--color-neutrals-day-600);
    --color-form-control-disabled-border: 1px var(--color-neutrals-day-300);
    --color-form-control-disabled-background: var(--color-neutrals-day-200);
    /* COMMON END */

    /* HEADER */
    --color-portal-header-tab-font: var(--color-neutrals-day-900);
    --color-portal-header-background: var(--color-neutrals-day-0);
    --color-portal-header-tab-active-background: var(--color-neutrals-day-400);
    --color-portal-header-tab-active-font: var(--color-neutrals-day-900);
    --color-portal-header-tab-hover-font: var(--color-neutrals-day-900);
    --color-portal-header-tab-hover-background: var(--color-indigo-24);

    --color-portal-header-action-icon-color: var(--color-neutrals-day-500);
    --color-portal-header-action-icon-hover: var(--color-indigo-100);
    --color-portal-header-activity-menu-opened-background: var(--color-neutrals-day-0);

    --color-portal-header-user-name-background: var(--color-neutrals-day-0);
    --color-portal-header-user-name: var(--color-neutrals-day-900);
    --color-portal-header-user-post: var(--color-neutrals-day-700);
    --color-portal-header-user-caret: var(--color-neutrals-day-500);
    --color-portal-header-user-caret-opened: var(--color-neutrals-day-500);

    --color-dropdown-user-profile-background: var(--color-neutrals-day-0);
    --color-dropdown-user-profile-border: var(--color-neutrals-day-300);
    --color-dropdown-user-profile-fio: var(--color-neutrals-day-1000);
    --color-dropdown-user-profile-post: blue;
    --color-dropdown-user-profile-settings-pen: var(--color-neutrals-day-800);
    --color-dropdown-user-profile-settings-pen-hover: var(--color-indigo-100);
    --color-dropdown-user-profile-logout-background: var(--color-neutrals-day-0);

    --color-dropdown-user-profile-logout-button-font: var(--color-indigo-100);
    --color-dropdown-user-profile-logout-button-border: var(--color-indigo-100);
    --color-dropdown-user-profile-logout-button-background: var(--color-neutrals-day-0);

    --color-dropdown-user-profile-logout-button-hover-font: var(--color-neutrals-day-0);
    --color-dropdown-user-profile-logout-button-hover-border: var(--color-indigo-80);
    --color-dropdown-user-profile-logout-button-hover-background: var(--color-indigo-80);

    --color-menu-active-module-font: var(--color-neutrals-day-800);
    --color-menu-active-module-opened-font: var(--color-neutrals-day-800);
    --color-dropdown-module-menu-font: black;
    --color-dropdown-module-menu-hover: var(--color-indigo-100);
    --color-dropdown-module-menu-background: var(--color-neutrals-day-0);
    --color-dropdown-module-item-border: var(--color-neutrals-day-300);
    /* HEADER END */

    /* SIDEBAR */
    --color-sidebar-background: var(--color-neutrals-day-0);
    --color-sidebar-highlighted-font: var(--color-neutrals-day-0);
    --color-sidebar-highlighted-background: var(--color-indigo-64);

    --color-sidebar-header-background: var(--color-neutrals-day-300);
    --color-sidebar-header-cell-active-background: var(--color-indigo-100);
    --color-sidebar-header-cell-active-font: var(--color-neutrals-day-0);
    --color-sidebar-header-cell-border: var(--color-neutrals-day-300);
    --color-sidebar-header-cell-background: var(--color-neutrals-day-0);
    --color-sidebar-header-cell-icon: var(--color-neutrals-day-500);
    --color-sidebar-header-search-input-font: var(--color-neutrals-day-900);
    --color-sidebar-header-search-input-placeholder: var(--color-neutrals-day-500);
    --color-sidebar-empty-message-font: var(--color-neutrals-day-700);

    --color-sidebar-header-cell-active-search-border: var(--color-indigo-100);
    --color-sidebar-header-cell-active-search-background: var(--color-neutrals-day-0);
    --color-sidebar-header-cell-active-search-icon-background: var(--color-indigo-100);
    --color-sidebar-header-cell-active-clear-icon-background: var(--color-neutrals-day-500);

    --color-sidebar-font: var(--color-neutrals-day-900);
    --color-sidebar-subtitle-font: var(--color-neutrals-day-900);
    --color-sidebar-active-font: var(--color-indigo-200);
    --color-sidebar-active-subtitle-font: var(--color-indigo-100);
    --color-sidebar-hover-font: var(--color-indigo-200);
    --color-sidebar-border: var(--color-neutrals-day-300);
    /* SIDEBAR END */

    /* PORTAL */
    --color-portal-background: var(--color-neutrals-day-200);
    --color-portal-header-font: var(--color-neutrals-day-900);
    --color-news-date: var(--color-neutrals-day-600);
    --color-news-title: var(--color-neutrals-day-900);
    --color-news-description: var(--color-neutrals-day-900);
    --color-news-title-hover: var(--color-indigo-100);
    --color-news-more: darksalmon;

    --color-materials-background: var(--color-neutrals-day-0);
    --color-materials-border: var(--color-neutrals-day-300);
    --color-materials-link: var(--color-neutrals-day-900);
    --color-materials-icon: var(--color-neutrals-day-200);
    --color-materials-upload-panel: var(--color-neutrals-day-900);
    --color-materials-upload-panel-background: var(--color-neutrals-day-0);
    --color-materials-upload-panel-border: var(--color-neutrals-day-300);

    --color-main-container-toggle-sidebar-button: var(--color-indigo-200);
    --color-main-container-toggle-sidebar-button-hover: var(--color-indigo-100);
    --color-main-container-toggle-sidebar-button-background: var(--color-neutrals-day-0);
    /* PORTAL END */

    /* PANEL */
    --color-panel-background: var(--color-neutrals-day-0);
    --color-panel-border: var(--color-neutrals-day-300);
    --color-panel-heading: var(--color-neutrals-day-700);
    /* PANEL END */

    /* FEEDBACK OVERLAY */
    --color-feedback-header-background: var(--color-background-alt);
    --color-feedback-header-border: var(--color-neutrals-day-300);
    --color-feedback-header-font: var(--color-label-font);

    --color-feedback-background: var(--color-background);
    --color-feedback-control-focus-font: var(--color-indigo-100);
    --color-feedback-control-border: var(--color-border);
    --color-feedback-control-label-font: var(--color-label-font);
    --color-feedback-control-warning-font: var(--color-error-100);
    --color-feedback-attachment-background: var(--color-neutrals-day-100);
    --color-feedback-attachment-border: var(--color-neutrals-day-300);
    --color-feedback-attachment-wrapper-font: var(--color-label-font);
    --color-feedback-attachment-file-icon-font: var(--color-label-font);
    --color-feedback-attachment-file-size-font: var(--color-label-font);
    --color-feedback-dragover-background: var(--color-indigo-64);
    --color-feedback-dragover-denied-background: var(--color-error-64);
    --color-feedback-done-font: var(--color-indigo-100);
    --color-feedback-done-background: var(--color-neutrals-day-0);
    /* FEEDBACK OVERLAY END */

    /* PROFILE SETTINGS */
    --color-profile-settings-header-background: var(--color-background-alt);
    --color-profile-settings-body-background: var(--color-background);
    --color-profile-settings-nav-tab-border: var(--color-neutrals-day-300);

    --color-profile-settings-nav-tab-font: var(--color-neutrals-day-700);
    --color-profile-settings-nav-tab-background: var(--color-neutrals-day-100);
    --color-profile-settings-nav-tab-hover-font: var(--color-indigo-100);

    --color-profile-settings-nav-tab-active-font: var(--color-indigo-200);
    --color-profile-settings-nav-tab-active-hover-font: var(--color-indigo-100);
    --color-profile-settings-nav-tab-active-background: var(--color-neutrals-day-0);

    /* user */
    --color-profile-settings-user-label-font: var(--color-label-font);
    --color-profile-settings-user-footer-border: var(--color-border);

    /* favorites */
    --color-tree-list-element-active-font: var(--color-neutrals-day-900);
    --color-tree-list-element-active-caret-font: var(--color-neutrals-day-900);
    --color-tree-list-element-root-catalog-background: var(--color-indigo-8);

    /* filters */
    --color-filters-item-title: var(--color-label-font);
    /* PROFILE SETTINGS END */

    /* REPORT */
    --color-report-header-background: var(--color-neutrals-day-200);
    --color-report-header-border: var(--color-neutrals-day-0);
    --color-report-header-fav-font: var(--color-label-font);
    --color-report-header-fav-active-font: var(--color-indigo-200);

    --color-report-header-actions-icon-font: var(--color-label-font);
    --color-report-header-actions-icon-hover-font: var(--color-indigo-200);
    --color-report-header-actions-menu-space-font: var(--color-indigo-100);

    --color-report-header-filters-background: var(--color-neutrals-day-100);
    /* REPORT END */

    /* ABOUT */
    --color-about-header-title-font: var(--color-neutrals-day-900);
    --color-about-header-background: var(--color-neutrals-day-200);
    --color-about-header-separator: var(--color-border);
    /* ABOUT END */
}