/* ============================================================ */
/* 🟡-Д1 — Единая дизайн-система теплоснаб72.рф                  */
/* Один источник правды для фирменных цветов и базовых          */
/* компонентов (кнопки, карточки). Цель — убрать визуальную     */
/* неоднородность из-за смешения Bootstrap-версий и инлайн-     */
/* стилей: общие токены + общие классы кнопок/карточек.         */
/*                                                              */
/* Подключается во все публичные страницы через                 */
/* include_after_body.html (после Bootstrap, чтобы можно было    */
/* переопределять). Цвета взяты из фактического кода:            */
/*   #e6002a — основной красный акцент (логотип/корзина),        */
/*   #2e7d32 / #2e8b57 — фирменный зелёный (ссылки/успех),       */
/*   #5ebd2d — светло-зелёный (доп. акцент).                     */
/* ============================================================ */

:root {
    /* Фирменные цвета (токены) */
    --tepl-red:          #e6002a;
    --tepl-red-dark:     #c2001f;
    --tepl-green:        #2e7d32;
    --tepl-green-dark:   #256528;
    --tepl-green-sea:    #2e8b57;
    --tepl-green-light:  #5ebd2d;
    --tepl-orange:       #dc7000;
    --tepl-amber:        #f8ba00;

    /* Текст / фон */
    --tepl-text:         #222;
    --tepl-text-muted:   #666;
    --tepl-border:       #e0e0e0;
    --tepl-surface:      #fff;
    --tepl-surface-soft: #f6f7f8;

    /* Радиусы и тени — единый «язык форм» */
    --tepl-radius:       12px;
    --tepl-radius-sm:    8px;
    --tepl-radius-pill:  999px;
    --tepl-shadow:       0 2px 8px rgba(0, 0, 0, .08);
    --tepl-shadow-hover: 0 4px 16px rgba(0, 0, 0, .12);

    /* Переходы */
    --tepl-transition:   .15s ease;
}

/* ============================================================ */
/* Кнопки — единый набор (.tepl-btn + модификаторы)             */
/* Используем там, где раньше были разнородные инлайн-кнопки.   */
/* Не ломает существующие Bootstrap .btn — это отдельный класс. */
/* ============================================================ */
.tepl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--tepl-radius-sm);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--tepl-transition),
                border-color var(--tepl-transition),
                color var(--tepl-transition),
                box-shadow var(--tepl-transition);
}
.tepl-btn:focus-visible {
    outline: 2px solid var(--tepl-green);
    outline-offset: 2px;
}

/* Основная (красная) — главный CTA */
.tepl-btn--primary {
    background: var(--tepl-red);
    color: #fff;
    border-color: var(--tepl-red);
}
.tepl-btn--primary:hover {
    background: var(--tepl-red-dark);
    border-color: var(--tepl-red-dark);
    color: #fff;
}

/* Вторичная (зелёная) — подтверждение/успех */
.tepl-btn--success {
    background: var(--tepl-green);
    color: #fff;
    border-color: var(--tepl-green);
}
.tepl-btn--success:hover {
    background: var(--tepl-green-dark);
    border-color: var(--tepl-green-dark);
    color: #fff;
}

/* Контурная — второстепенные действия */
.tepl-btn--outline {
    background: transparent;
    color: var(--tepl-green);
    border-color: var(--tepl-green);
}
.tepl-btn--outline:hover {
    background: var(--tepl-green);
    color: #fff;
}

/* Размеры */
.tepl-btn--lg { padding: 14px 28px; font-size: 18px; }
.tepl-btn--sm { padding: 7px 14px;  font-size: 14px; }
.tepl-btn--block { width: 100%; }

/* ============================================================ */
/* Карточки — единый контейнер (.tepl-card)                     */
/* ============================================================ */
.tepl-card {
    background: var(--tepl-surface);
    border: 1px solid var(--tepl-border);
    border-radius: var(--tepl-radius);
    box-shadow: var(--tepl-shadow);
    transition: box-shadow var(--tepl-transition),
                transform var(--tepl-transition);
}
.tepl-card--hoverable:hover {
    box-shadow: var(--tepl-shadow-hover);
    transform: translateY(-2px);
}
.tepl-card__body { padding: 16px; }
.tepl-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--tepl-text);
    margin: 0 0 8px;
}