/* Единая система стилизации кнопок проекта (Цветовая палитра из брендбука) */

:root {
    /* Переменные цветов кнопок по их назначению */
    
    /* 1. Главное действие (Primary Magenta) */
    --btn-primary-bg: #b80e80;
    --btn-primary-hover: #960a68;
    --btn-primary-color: #ffffff;

    /* 2. Подтверждение / Сохранение / Успех (Confirm / Save - Teal) */
    --btn-confirm-bg: #42b8b4;
    --btn-confirm-hover: #369a97;
    --btn-confirm-color: #ffffff;

    /* 3. Изменение / Редактирование / Настройка (Edit / Modify - Orange) */
    --btn-edit-bg: #ff8200;
    --btn-edit-hover: #e07200;
    --btn-edit-color: #ffffff;

    /* 4. Отмена / Вторичное действие (Cancel / Secondary - Light Gray) */
    --btn-cancel-bg: #e4e7eb;
    --btn-cancel-hover: #dadada;
    --btn-cancel-color: #444444;

    /* 5. Предупреждение / Особые действия (Warning - Yellow) */
    --btn-warning-bg: #ffed00;
    --btn-warning-hover: #e6d500;
    --btn-warning-color: #222222;

    /* 6. Удаление / Опасность (Delete / Danger - Red) */
    --btn-danger-bg: #e74c3c;
    --btn-danger-hover: #c0392b;
    --btn-danger-color: #ffffff;
}

/* Основной класс кнопки */
.btn {
    display: inline-block;
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    background-color: var(--btn-confirm-bg);
    color: var(--btn-confirm-color);
    text-decoration: none;
    border: none;
    border-radius: var(--border-radius-sm, 4px);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn:hover {
    background-color: var(--btn-confirm-hover);
}

.btn:active {
    transform: translateY(1px);
}

/* -------------------------------------------------------------
   Модификаторы кнопок по назначению (работают во всех элементах)
   ------------------------------------------------------------- */

/* 1. Главная акцентная кнопка */
.btn.btn-primary, button.btn-primary, a.btn-primary, input[type="submit"].btn-primary {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-color) !important;
}
.btn.btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover, input[type="submit"].btn-primary:hover {
    background-color: var(--btn-primary-hover) !important;
}

/* 2. Подтверждение / Сохранение */
.btn.btn-confirm, button.btn-confirm, a.btn-confirm, input[type="submit"].btn-confirm {
    background-color: var(--btn-confirm-bg) !important;
    color: var(--btn-confirm-color) !important;
}
.btn.btn-confirm:hover, button.btn-confirm:hover, a.btn-confirm:hover, input[type="submit"].btn-confirm:hover {
    background-color: var(--btn-confirm-hover) !important;
}

/* 3. Изменение / Редактирование / Настройка */
.btn.btn-edit, button.btn-edit, a.btn-edit, input[type="button"].btn-edit {
    background-color: var(--btn-edit-bg) !important;
    color: var(--btn-edit-color) !important;
}
.btn.btn-edit:hover, button.btn-edit:hover, a.btn-edit:hover, input[type="button"].btn-edit:hover {
    background-color: var(--btn-edit-hover) !important;
}

/* 4. Отмена / Закрытие / Вторичное действие */
.btn.btn-cancel, button.btn-cancel, a.btn-cancel, input[type="button"].btn-cancel {
    background-color: var(--btn-cancel-bg) !important;
    color: var(--btn-cancel-color) !important;
}
.btn.btn-cancel:hover, button.btn-cancel:hover, a.btn-cancel:hover, input[type="button"].btn-cancel:hover {
    background-color: var(--btn-cancel-hover) !important;
}

/* 5. Предупреждение / Регенерация */
.btn.btn-warning, button.btn-warning, a.btn-warning, input[type="button"].btn-warning {
    background-color: var(--btn-warning-bg) !important;
    color: var(--btn-warning-color) !important;
}
.btn.btn-warning:hover, button.btn-warning:hover, a.btn-warning:hover, input[type="button"].btn-warning:hover {
    background-color: var(--btn-warning-hover) !important;
}

/* 6. Удаление / Опасные действия */
.btn.btn-danger, button.btn-danger, a.btn-danger, input[type="submit"].btn-danger {
    background-color: var(--btn-danger-bg) !important;
    color: var(--btn-danger-color) !important;
}
.btn.btn-danger:hover, button.btn-danger:hover, a.btn-danger:hover, input[type="submit"].btn-danger:hover {
    background-color: var(--btn-danger-hover) !important;
}