/* ============================================================
   Фирменный стиль «Мой бизнес» — базовый слой.
   Источник: D:\proj\brand\brandbook.pdf, раздел «01. Базовые
   элементы фирменного стиля», стр. 17–22.

   Файл ничего не перекрашивает сам по себе: он даёт переменные,
   шрифты и утилиты. Страницы подключаются к ним по мере перевода
   на фирменный вид — так вёрстку 133 страниц можно менять
   по одной, ничего не ломая разом.
   ============================================================ */

:root {
    /* Основные цвета брендбука (стр. 17) */
    --brand-red: #E04E39; /* акценты, слоганы — 2–7 % макета  */
    --brand-brown: #623B2A; /* логотип, заголовки — 5–15 %       */
    --brand-beige: #C39367; /* плашки, пиктограммы — 5–15 %      */
    --brand-ink: #2C2A29; /* основной текст — 5–10 %           */
    --brand-white: #FFFFFF; /* фон — 80–90 %                     */
    /* Тинты (стр. 18): те же цвета в 20/40/60/80 % насыщенности.
       Считаны как смешение с белым — так их и печатают. */
    --brand-red-80: #E66B59;
    --brand-red-60: #EC8F82;
    --brand-red-40: #F3B8AF;
    --brand-red-20: #F9DCD8;
    --brand-brown-80: #7B5D4F;
    --brand-brown-60: #9B8175;
    --brand-brown-40: #BDACA4;
    --brand-brown-20: #DED8D3;
    --brand-beige-80: #CFA985;
    --brand-beige-60: #DBBFA4;
    --brand-beige-40: #E7D4C3;
    --brand-beige-20: #F3EAE1;
    /* Производные для интерфейса */
    --brand-line: #EDE3DA; /* границы карточек и таблиц */
    --brand-bg: #FAF7F4; /* очень светлый фон полос   */
    --brand-hero-from: #623B2A;
    --brand-hero-to: #A5714B;
}

/* ── Шрифты (стр. 20) ─────────────────────────────────────────
   По брендбуку заголовки набираются гарнитурой Circe, текст —
   PT Sans. Circe платная и в веб её класть нельзя, поэтому для
   заголовков берём Montserrat: тот же геометрический гротеск,
   файлы лежат в комплекте бренда. Шрифт грузится только там,
   где реально применён. */
@font-face {
    font-family: 'Brand Sans';
    src: url('/fonts/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Brand Sans';
    src: url('/fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Brand Sans';
    src: url('/fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

.brand-title {
    font-family: 'Brand Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -.2px;
}

/* ── Водяные знаки (стр. 21–22) ───────────────────────────────
   Стилевая графика бренда — россыпь геометрических фигур.
   На белом она бежевая, на цветном — инверсная (белые фигуры).
   Кладём её фоном, а не картинкой в разметке: так знак не
   мешает ни выделению текста, ни печати. */
.brand-wm {
    position: relative;
    isolation: isolate;
}

    .brand-wm::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url('/img/brand-pattern.svg') repeat;
        background-size: 220px 220px;
        opacity: .12;
        pointer-events: none;
        z-index: -1;
    }

    /* На цветной подложке (шапки, футер, вход) фигуры белые */
    .brand-wm.brand-wm-inv::before {
        background-image: url('/img/brand-pattern-inv.svg');
        opacity: .16;
    }

/* Угловой знак: для пустых состояний таблиц и шапок модалок,
   где сплошная плитка была бы навязчивой. */
.brand-wm-corner {
    position: relative;
    overflow: hidden;
}

    .brand-wm-corner::after {
        content: '';
        position: absolute;
        right: -30px;
        bottom: -30px;
        width: 220px;
        height: 220px;
        background: url('/img/brand-pattern.svg') no-repeat;
        background-size: 220px 220px;
        opacity: .10;
        pointer-events: none;
    }

    .brand-wm-corner.brand-wm-inv::after {
        background-image: url('/img/brand-pattern-inv.svg');
        opacity: .18;
    }

/* ── Шапка страницы ───────────────────────────────────────────
   Фирменная замена синему градиенту: коричнево-бежевая заливка
   с водяным знаком. Соотношение цветов держим по стр. 19 —
   страница остаётся преимущественно белой, цвет живёт в шапке. */
.brand-hero {
    background: linear-gradient(135deg, var(--brand-hero-from), var(--brand-hero-to));
    color: #fff;
    border-radius: 14px;
    padding: 18px 22px;
    overflow: hidden;
}

    .brand-hero .brand-hero-title {
        font-family: 'Brand Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
        font-weight: 600;
        font-size: 20px;
        margin: 0;
        letter-spacing: -.2px;
    }

    .brand-hero .brand-hero-sub {
        font-size: 12.5px;
        opacity: .85;
        margin-top: 3px;
    }

    /* Иконка направления в кружке справа — как в KPI-карточках */
    .brand-hero .brand-hero-icon {
        font-size: 26px;
        opacity: .9;
    }

/* ── Акценты ──────────────────────────────────────────────────
   Красный по брендбуку — акцент на 2–7 % площади, поэтому он
   только у главного действия, а не у всех кнопок подряд. */
.btn-brand {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

    .btn-brand:hover, .btn-brand:focus {
        background: #CF4531;
        border-color: #CF4531;
        color: #fff;
    }

.btn-brand-outline {
    background: transparent;
    border: 1px solid var(--brand-beige);
    color: var(--brand-brown);
}

    .btn-brand-outline:hover {
        background: var(--brand-beige-20);
        color: var(--brand-brown);
    }

.brand-badge {
    background: var(--brand-beige-20);
    color: var(--brand-brown);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
}

/* ── Таблицы ──────────────────────────────────────────────────
   Шапка на бежевой плашке, наведение — самый светлый тинт.
   Полосы под строками не вводим: белого должно оставаться много. */
.brand-table thead th {
    background: var(--brand-beige-20);
    color: var(--brand-brown);
    border-bottom: 1px solid var(--brand-line);
}

.brand-table tbody tr:hover {
    background: #FBF7F3;
}

/* Пустое состояние: текст и угловой водяной знак */
.brand-empty {
    padding: 26px 18px;
    text-align: center;
    color: #9c8b7f;
    font-size: 13px;
}