@use './themes/light';
@use './themes/light-hc';
@use './themes/dark';
@use './themes/dark-hc';

// Override @gravity-ui/uikit color palette with our own colors

.g-root {
    --g-text-header-font-weight: 500;
    --g-text-subheader-font-weight: 600;
    --g-text-display-font-weight: 500;
    --g-text-accent-font-weight: 500;

    &_theme_light {
        --g-color-base-background: rgb(255, 255, 255);
        --g-color-base-brand: var(--g-color-private-blue-550-solid);
        --g-color-base-brand-hover: var(--g-color-private-blue-600-solid);
        --g-color-base-selection: var(--g-color-private-blue-100);
        --g-color-base-selection-hover: var(--g-color-private-blue-200);
        --g-color-line-brand: var(--g-color-private-blue-550-solid);
        --g-color-text-brand: var(--g-color-private-blue-600-solid);
        --g-color-text-brand-heavy: var(--g-color-private-blue-700-solid);
        --g-color-text-brand-contrast: var(--g-color-text-light-primary);
        --g-color-text-link: var(--g-color-private-blue-600-solid);
        --g-color-text-link-hover: var(--g-color-private-blue-800-solid);
        @include light.colors-private-light;
    }

    &_theme_light-hc {
        --g-color-base-background: rgb(255, 255, 255);
        --g-color-base-brand: var(--g-color-private-blue-600-solid);
        --g-color-base-brand-hover: var(--g-color-private-blue-800-solid);
        --g-color-base-selection: var(--g-color-private-blue-250);
        --g-color-base-selection-hover: var(--g-color-private-blue-350);
        --g-color-line-brand: var(--g-color-private-blue-600-solid);
        --g-color-text-brand: var(--g-color-private-blue-650-solid);
        --g-color-text-brand-heavy: var(--g-color-private-blue-900-solid);
        --g-color-text-brand-contrast: var(--g-color-text-light-primary);
        --g-color-text-link: var(--g-color-private-blue-650-solid);
        --g-color-text-link-hover: var(--g-color-private-blue-850-solid);
        @include light-hc.colors-private-light-hc;
    }

    &_theme_dark {
        --g-color-base-background: rgb(45, 44, 51);
        --g-color-base-brand: var(--g-color-private-blue-450-solid);
        --g-color-base-brand-hover: var(--g-color-private-blue-600-solid);
        --g-color-base-selection: var(--g-color-private-blue-150);
        --g-color-base-selection-hover: var(--g-color-private-blue-200);
        --g-color-line-brand: var(--g-color-private-blue-550-solid);
        --g-color-text-brand: var(--g-color-private-blue-550-solid);
        --g-color-text-brand-heavy: var(--g-color-private-blue-600-solid);
        --g-color-text-brand-contrast: var(--g-color-text-light-primary);
        --g-color-text-link: var(--g-color-private-blue-550-solid);
        --g-color-text-link-hover: var(--g-color-private-blue-700-solid);
        @include dark.colors-private-dark;
    }

    &_theme_dark-hc {
        --g-color-base-background: rgb(34, 35, 38);
        --g-color-base-brand: var(--g-color-private-blue-450-solid);
        --g-color-base-brand-hover: var(--g-color-private-blue-650-solid);
        --g-color-base-selection: var(--g-color-private-blue-250);
        --g-color-base-selection-hover: var(--g-color-private-blue-400);
        --g-color-line-brand: var(--g-color-private-blue-550-solid);
        --g-color-text-brand: var(--g-color-private-blue-650-solid);
        --g-color-text-brand-heavy: var(--g-color-private-blue-850-solid);
        --g-color-text-brand-contrast: var(--g-color-text-light-primary);
        --g-color-text-link: var(--g-color-private-blue-650-solid);
        --g-color-text-link-hover: var(--g-color-private-blue-800-solid);
        @include dark-hc.colors-private-dark-hc;
    }
}