:root {
    --color-primary-100: #f0f4fc;
    --color-primary-300: #dde9fc;
    --color-primary: #377dff;
    --color-primary-900: #154cb3;
    --color-success: #48a27f;
    --color-info: #7ebefa;
    --color-warning: #e69f0e;
    --color-error: #ff5630;
    --color-text-title: #323b4b;
    --color-text-common: #4e5d78;
    --color-text-additional: #8a94a6;
    --color-text-disabled: #c0cadb;
    --color-icon: #c0cadb;
    --color-bg-common: #fff;
    --color-bg-additional: #F7F8FC;
    --color-bg-selected: #eef3f8;
    --color-bg-1: #c1c7d0;
    --color-bg-3: #fafbfc;
    --color-white: #fff;
    --color-lightgrey: #dfe0eb;
    /** Old variable **/
    --color-black: #2F313D;
    --color-mediumblack: #484D60;
    --color-dark: #163C6E;
    --color-blue: #2f7fed;
    --color-green: #12C856;
    --color-red: #EE4A68;
    --color-darkgrey: #747d88;
    --color-grey: #cbcfd4;
    --color-lightgrey: #f2f4f7;
    --color-white: #fff;

    --control-border: 1px solid var(--color-grey);

    --control-border-radius: 5px;
    --control-height: 42px;
    --control-font-size: 0.8rem;
    --control-label-size: 0.85rem;
}

:root {
    --font-family: Inter;
    --font-icon: Material Design Icons;
    --font-size-large: 1.15rem;
    --font-size: 14px;
    --font-size-small: 0.85rem;
    --font-size-h1: 2rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.125rem;
}

:root {
    --scroll-width: 6px;
    --content-block-indent: 12px;
    --content-block-border-radius: 3px;
    --content-shadow: 0px 4px 8px rgba(78, 93, 120, 0.16);
    --sidebar-width-wide: 260px;
    --header-margin-bottom: calc(var(--content-block-indent) / 2);
}

:root {
    --header-padding-horizontal: 16px;
    --header-padding-vertical: 28px;
    --header-logo-size: 32px;
    --header-height: calc(var(--header-padding-vertical) + var(--header-logo-size) + var(--header-margin-bottom));
}

:root {
    --comp-font: normal normal normal var(--font-size)/1 var(--font-family);
    --comp-icon-size: calc(var(--font-size) * 1.5);
    --comp-height: calc(var(--font-size) * 3);
    --comp-height-small: calc(var(--font-size-small) * 3);
    --comp-padding-horiz: var(--font-size);
    --comp-width-min: 180px;
    --comp-bg: var(--color-white);
    --comp-border: 1px solid var(--color-lightgrey);
    --comp-border-radius: calc(var(--font-size) / 4);
    --comp-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0px 24px 48px rgba(0, 0, 0, 0.1);
    --comp-label-width: 150px;
    --comp-disabled-bg: #f8f9fa;
    --comp-error-bg: #fff5f5;
    --comp-error-border: #ffd8d8;
    --comp-success-bg: #edfff7;
    --comp-success-border: #a5ffd7;
    --btn-disabled-bg: #c1c7d0;
    --btn-disabled-text: #8a94a6;
}

:root {
    --palette-size: 250px;
    --color-size: 25px;
    --color-in-line: 8;
    --color-gap: 6px;
}

:root {
    --cp-max-width: 720px;
    --cp-margin-cols: calc(100% * 2 / 12);
    --group-padding-horiz: 3rem;
}

:root {
    --tree-level-indent: 1.5rem;
}