:root {
    /* Фон */
    --bg: #F5F9FF;

    /* Шапка и футер */
    --header: #FDB813; /* тёплый желтый */
    --footer-from: #FDB813;
    --footer-to: var(--bg);

    /* Основные акцентные цвета (желтый) */
    --primary: #FDB813;
    --primary-hover: #E6A600; /* чуть темнее */
    --primary-active: #CC9400; /* ещё темнее */
    --primary-contrast: #ffffff;
    --focus-ring-primary: rgba(255, 184, 0, 0.35);

    /* Вторичные акценты (голубой) */
    --secondary: #66B2FF;
    --secondary-hover: #3399FF;
    --secondary-active: #0073E6;
    --secondary-contrast: #ffffff;
    --focus-ring-secondary: rgba(51, 153, 255, 0.35);

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

    /* Текст */
    --text: #1C2B3A;
    --text-light: #547188;
}

* {
    font-family: "Wix Madefor Display", sans-serif;
    font-optical-sizing: auto;
    box-sizing: border-box;
}

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

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

.footer {
    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;
    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-primary) !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;
}

/* --------------------- */
/* Кнопка secondary */
.btn-secondary,
button.btn-secondary,
a.btn-secondary {
    background-color: var(--secondary) !important;
    border: 1px solid var(--secondary) !important;
    color: var(--secondary-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;
    cursor: pointer;
}

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

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

.btn-secondary:disabled,
.btn-secondary.disabled,
button.btn-secondary:disabled,
a.btn-secondary.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;
}