/* не работает при динамическом подключении в модулях */
/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); */

:root {
    /* --body-height: calc( 100% - var(--header-height) - var(--footer-height) ); */

    /* Базовый - серый */
    --clr-normal-bg: #f0f0f0;
    --clr-normal-border: #aaaaaa;
    --clr-normal-text:  #333;

    --clr-normal-dark-bg: #e0e0e0;
    --clr-normal-dark-border: #888;
    --clr-normal-dark-text:  #111;

    /* --- Схемы контролов (фон / обводка / текст) --- */

    /* 1. Нейтральная — совпадает с базовым серым */
    --color-normal-bg: var(--clr-normal-bg);
    --color-normal-border: var(--clr-normal-border);
    --color-normal-text: var(--clr-normal-text);
    --color-normal-hover-bg: var(--clr-normal-dark-bg);
    --color-normal-hover-border: var(--clr-normal-dark-border);
    --color-normal-hover-text: var(--clr-normal-dark-text);

    /* 2. Основное действие (action / синяя ) */
    --color-action-bg: #DAE8FC;
    --color-action-border: #6C8EBF;
    --color-action-text: #1a3a5c;
    --color-action-hover-bg: #6C8EBF;
    --color-action-hover-border: #4a6a9f;
    --color-action-hover-text: #ffffff;

    /* 3. Опасное действие (stoper / красная ) */
    --color-danger-bg: #F8CECC;
    --color-danger-border: #B85450;
    --color-danger-text: #7a1a18;
    --color-danger-hover-bg: #B85450;
    --color-danger-hover-border: #8a2020;
    --color-danger-hover-text: #ffffff;

    /* 4. Успех / Готово (goal/done / зелёная ) */
    --color-success-bg: #D5E8D4;
    --color-success-border: #82B366;
    --color-success-text: #2d5a24;
    --color-success-hover-bg: #82B366;
    --color-success-hover-border: #5a8a45;
    --color-success-hover-text: #ffffff;

    /* 5. Предупреждение (root/inprogress / янтарная ) */
    --color-warn-bg: #FFE6CC;
    --color-warn-border: #D79B00;
    --color-warn-text: #5a3d00;
    --color-warn-hover-bg: #D79B00;
    --color-warn-hover-border: #a87500;
    --color-warn-hover-text: #ffffff;

    /* 6. Выбор / Вторичная (story / светло-зелёная ) */
    --color-pick-bg: #ebfcda;
    --color-pick-border: #a6bf6c;
    --color-pick-text: #3d5a1a;
    --color-pick-hover-bg: #a6bf6c;
    --color-pick-hover-border: #7a9545;
    --color-pick-hover-text: #ffffff;

    /* 7. Информационная / Тихая (info / бежевая ) */
    --color-muted-bg: #faf7f0;
    --color-muted-border: #837c67;
    --color-muted-text: #4a4030;
    --color-muted-hover-bg: #837c67;
    --color-muted-hover-border: #5a5040;
    --color-muted-hover-text: #ffffff;

    /* 8. Ожидание (waiting / розовая ) */
    --color-wait-bg: #f6bcf0;
    --color-wait-border: #de5ee2;
    --color-wait-text: #6a006e;
    --color-wait-hover-bg: #de5ee2;
    --color-wait-hover-border: #b030b5;
    --color-wait-hover-text: #ffffff;
}

/* --------------------------------------------------------------------------------- */

/* --- Классы контролов по схемам --- */

.ctrl-normal {
    background: var(--color-normal-bg);
    border-color: var(--color-normal-border);
    color: var(--color-normal-text);
}
.ctrl-normal:hover {
    background: var(--color-normal-hover-bg);
    border-color: var(--color-normal-hover-border);
    color: var(--color-normal-hover-text);
}

.ctrl-action {
    background: var(--color-action-bg);
    border-color: var(--color-action-border);
    color: var(--color-action-text);
}
.ctrl-action:hover {
    background: var(--color-action-hover-bg);
    border-color: var(--color-action-hover-border);
    color: var(--color-action-hover-text);
}

.ctrl-danger {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger-text);
}
.ctrl-danger:hover {
    background: var(--color-danger-hover-bg);
    border-color: var(--color-danger-hover-border);
    color: var(--color-danger-hover-text);
}

.ctrl-success {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success-text);
}
.ctrl-success:hover {
    background: var(--color-success-hover-bg);
    border-color: var(--color-success-hover-border);
    color: var(--color-success-hover-text);
}

.ctrl-warn {
    background: var(--color-warn-bg);
    border-color: var(--color-warn-border);
    color: var(--color-warn-text);
}
.ctrl-warn:hover {
    background: var(--color-warn-hover-bg);
    border-color: var(--color-warn-hover-border);
    color: var(--color-warn-hover-text);
}

.ctrl-pick {
    background: var(--color-pick-bg);
    border-color: var(--color-pick-border);
    color: var(--color-pick-text);
}
.ctrl-pick:hover {
    background: var(--color-pick-hover-bg);
    border-color: var(--color-pick-hover-border);
    color: var(--color-pick-hover-text);
}

.ctrl-muted {
    background: var(--color-muted-bg);
    border-color: var(--color-muted-border);
    color: var(--color-muted-text);
}
.ctrl-muted:hover {
    background: var(--color-muted-hover-bg);
    border-color: var(--color-muted-hover-border);
    color: var(--color-muted-hover-text);
}

.ctrl-wait {
    background: var(--color-wait-bg);
    border-color: var(--color-wait-border);
    color: var(--color-wait-text);
}
.ctrl-wait:hover {
    background: var(--color-wait-hover-bg);
    border-color: var(--color-wait-hover-border);
    color: var(--color-wait-hover-text);
}

/* --- Семейства цветов кнопок (алиасы на те же переменные) --- */

/* 1. Нейтральная */
.schema-ctrl-normal       { background: var(--color-normal-bg); border-color: var(--color-normal-border); color: var(--color-normal-text); }
.schema-ctrl-normal-hover { background: var(--color-normal-hover-bg); border-color: var(--color-normal-hover-border); color: var(--color-normal-hover-text); }

/* 2. Основное действие (action / синяя семья) */
.schema-ctrl-action        { background: var(--color-action-bg); border-color: var(--color-action-border); color: var(--color-action-text); }
.schema-ctrl-action-hover  { background: var(--color-action-hover-bg); border-color: var(--color-action-hover-border); color: var(--color-action-hover-text); }

/* 3. Опасное действие (stoper / красная семья) */
.schema-ctrl-danger        { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger-text); }
.schema-ctrl-danger-hover  { background: var(--color-danger-hover-bg); border-color: var(--color-danger-hover-border); color: var(--color-danger-hover-text); }

/* 4. Успех / Готово (goal/done / зелёная семья) */
.schema-ctrl-success       { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-text); }
.schema-ctrl-success-hover { background: var(--color-success-hover-bg); border-color: var(--color-success-hover-border); color: var(--color-success-hover-text); }

/* 5. Предупреждение (root/inprogress / янтарная семья) */
.schema-ctrl-warn          { background: var(--color-warn-bg); border-color: var(--color-warn-border); color: var(--color-warn-text); }
.schema-ctrl-warn-hover    { background: var(--color-warn-hover-bg); border-color: var(--color-warn-hover-border); color: var(--color-warn-hover-text); }

/* 6. Выбор / Вторичная (story / светло-зелёная семья) */
.schema-ctrl-pick          { background: var(--color-pick-bg); border-color: var(--color-pick-border); color: var(--color-pick-text); }
.schema-ctrl-pick-hover    { background: var(--color-pick-hover-bg); border-color: var(--color-pick-hover-border); color: var(--color-pick-hover-text); }

/* 7. Информационная / Тихая (info / бежевая семья) */
.schema-ctrl-muted         { background: var(--color-muted-bg); border-color: var(--color-muted-border); color: var(--color-muted-text); }
.schema-ctrl-muted-hover   { background: var(--color-muted-hover-bg); border-color: var(--color-muted-hover-border); color: var(--color-muted-hover-text); }

/* 8. Ожидание (waiting / розовая семья) */
.schema-ctrl-wait          { background: var(--color-wait-bg); border-color: var(--color-wait-border); color: var(--color-wait-text); }
.schema-ctrl-wait-hover    { background: var(--color-wait-hover-bg); border-color: var(--color-wait-hover-border); color: var(--color-wait-hover-text); }