:root {
    /* Фон */
    --bg: #F8F8F8;
    /* светлый, чуть голубоватый фон */
    --header: #003a9a;
    /* мягкий градиентный голубой для шапки */
    --footer-from: #003a9a;
    /* градиент футера сверху */
    --footer-to: var(--bg);

    /* Основные акцентные цвета (ярче) */
    --primary: #003a9a;
    /* насыщенный синий */
    --primary-hover: #0052A3;
    /* темнее при наведении */
    --primary-active: #003E7F;
    /* ещё темнее при клике */
    --primary-contrast: #ffffff;

    /* Вторичные акценты */
    --secondary: #66B2FF;
    /* яркий голубой для второстепенных кнопок */
    --secondary-hover: #3399FF;
    --secondary-active: #0073E6;

    /* Состояния */
    --disabled-bg: #E0EFFC;
    --disabled-text: #A0A9B2;

    /* Текст */
    --text: #1C2B3A;
    /* тёмный текст */
    --text-light: #547188;
    --focus-ring: rgba(0, 102, 204, 0.35);
    /* яркий синий фокус */
}

* {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

body {
    background-color: var(--bg);
    color: var(--text);
}

.header {
    background-color: var(--header);
    color: #FFF;
}

.footer {
    /* background: linear-gradient(to top, var(--footer-from), var(--footer-to)); */
    background-color: var(--header);
    color: #FFF;
}

/* .container {
    max-width: 1140px;
} */

/* --------------------- */
/* Кнопка primary */
.btn-primary,
button.btn-primary,
a.btn-primary {
    background-color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    color: var(--primary-contrast) !important;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
    /* border-radius: 4px; */
    /* padding: 0.5em 1em; */
    cursor: pointer;
}

.btn-primary:hover,
.btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus,
a.btn-primary:hover,
a.btn-primary:focus {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    outline: none !important;
    box-shadow: 0 0 0 0.25rem var(--focus-ring) !important;
}

.btn-primary:active,
.btn-primary.active,
.show>.btn-primary.dropdown-toggle,
button.btn-primary:active,
a.btn-primary:active {
    background-color: var(--primary-active) !important;
    border-color: var(--primary-active) !important;
    box-shadow: none !important;
    transform: translateY(1px);
}

.btn-primary:disabled,
.btn-primary.disabled,
button.btn-primary:disabled,
a.btn-primary.disabled {
    background-color: var(--disabled-bg) !important;
    border-color: var(--disabled-bg) !important;
    color: var(--disabled-text) !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* Фоновые классы */
.bg-primary {
    background-color: var(--primary) !important;
    color: var(--primary-contrast) !important;
    /* чтобы текст всегда был читаемым */
}

.bg-primary-hover:hover {
    background-color: var(--primary-hover) !important;
    color: var(--primary-contrast) !important;
}

.bg-primary-active:active {
    background-color: var(--primary-active) !important;
    color: var(--primary-contrast) !important;
}

.text-primary {
    color: var(--primary) !important;
}