/* ДИЗАЙН-СИСТЕМА ESTHERWOW
 *
 * Единственное место, где заданы цвета и шрифты сайта.
 *
 * Раньше у каждой страницы был свой набор: главная жила
 * по одной палитре, личный кабинет и обучение — по другой,
 * админка вообще на Arial и серых тонах. Одинаковые по
 * смыслу цвета отличались на пару тонов, и сайт выглядел
 * собранным из разных кусков.
 *
 * Файл подключается первым на каждой странице, поэтому
 * достаточно поправить значение здесь — и оно изменится
 * везде сразу.
 */

:root {

    /* ========================================
       ЦВЕТА
    ======================================== */

    /* Тёмный фон: подвал, кнопки, тёмные секции */
    --bg-primary: #111111;

    /* Кремовый фон: основной фон страниц */
    --bg-secondary: #fbf6f2;

    /* ЦВЕТ БАБОЧКИ — главный цвет марки.
       Снят с крыла на главной странице: это самый
       частый тон изображения, а не подобранный на глаз.
       Butterfly Method — это он, поэтому он ведущий,
       а золото ушло на второй план. */

    /* Блик на крыле: подсветка, свечение, градиенты */
    --butterfly-bright: #38b7d7;

    /* Основной тон крыла: рамки, заливки, крупные элементы.
       Контраст на кремовом 3.8 — для мелкого текста мало */
    --butterfly: #2787a9;

    /* Заливка кнопок: белая надпись читается (контраст 5.0) */
    --butterfly-strong: #26788f;

    /* Текст и ссылки на светлом фоне (контраст 8.2) */
    --butterfly-deep: #1d4f6b;

    /* Полупрозрачные: подложка и рамка */
    --butterfly-soft: rgba(39, 135, 169, 0.10);
    --butterfly-border: rgba(39, 135, 169, 0.30);

    /* ТОНА ТРЁХ УРОВНЕЙ
       Ровная заливка карточек, без градиента:
       синий — пробуждение, охра — куколка,
       сине-серый — превращение. */

    --level-1-tint: #e6f0f5;
    --level-2-tint: #f5ead7;
    --level-3-tint: #e5e9ed;

    /* Золотой акцент: теперь второстепенный —
       подчёркивания и мелкие детали */
    --accent-gold: #c5a059;

    /* Основной текст */
    --text-main: #282828;

    /* Приглушённый текст: подписи, пояснения, даты */
    --text-muted: #8c8c8c;

    --white: #ffffff;

    /* СЦЕНА — как на странице книг: тёмно-синий фон
       с мягким голубым светом и золотом вторым акцентом.
       Золото сцены светлее --accent-gold: оно для тёмного
       фона, на кремовом мелким текстом его не ставим. */
    --ink: #0b1d2b;
    --ink-2: #10304a;
    --gold: #d8b46a;
    --gold-soft: rgba(216, 180, 106, 0.35);
    --gold-faint: rgba(216, 180, 106, 0.16);
    --glow-blue: rgba(56, 183, 215, 0.22);
    --line-soft: rgba(29, 79, 107, 0.14);
    --ease-soft: cubic-bezier(.2, .7, .2, 1);
    --shadow-lift: 0 30px 60px -36px rgba(16, 48, 74, 0.55);


    /* ========================================
       ПРОИЗВОДНЫЕ ОТТЕНКИ
    ======================================== */

    /* Границы — тот же тёмный, но почти прозрачный:
       так рамка не спорит с фоном */

    --border: rgba(17, 17, 17, 0.08);
    --border-strong: rgba(17, 17, 17, 0.16);

    /* Золото на светлом фоне: заливка и мягкая рамка */

    --accent-soft: rgba(197, 160, 89, 0.12);
    --accent-border: rgba(197, 160, 89, 0.35);

    /* Карточки и поля поверх кремового фона */
    --surface: #ffffff;

    /* Чуть притенённый кремовый: секции-полосы */
    --surface-sunken: #f4eee8;


    /* ========================================
       СЛУЖЕБНЫЕ СОСТОЯНИЯ
    ======================================== */

    /* Успех, пройденный урок */
    --green: #5d9972;

    /* Эфир идёт */
    --live: #d2483f;


    /* ========================================
       ШРИФТЫ
    ======================================== */

    /* Заголовки — по гайду прописными, с разрядкой */

    --font-header:
        'Cormorant Garamond',
        Georgia,
        serif;

    --font-body:
        'Inter',
        'Plus Jakarta Sans',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    /* Разрядка заголовков из гайда */
    --heading-tracking: 2px;


    /* ========================================
       ПРЕЖНИЕ ИМЕНА
    ======================================== */

    /* В личном кабинете, обучении и вебинарах цвета
       вызываются старыми именами — их больше полусотни.
       Вместо того чтобы переписывать каждое обращение,
       имена оставлены как ссылки на цвета выше. */

    --background: var(--bg-secondary);
    --black: var(--bg-primary);
    --text: var(--text-main);
    --muted: var(--text-muted);
    --light-muted: var(--text-muted);
    --label: var(--text-muted);

    --serif: var(--font-header);
    --sans: var(--font-body);
}


/* ========================================
   БАЗОВЫЙ СЛОЙ
======================================== */

/* Раньше на главной у body стоял системный шрифт:
   Inter подключался, но к тексту не применялся. */

body {
    font-family: var(--font-body);
    color: var(--text-main);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-header);
    color: var(--text-main);
}

/* Поля ввода шрифт не наследуют — приходится задавать */

input,
textarea,
select,
button {
    font-family: inherit;
}


/* ========================================
   ЗНАК МАРКИ
   Бесконечность из прямых линий (static/images/logo-mark.svg).
   Стоит перед названием в шапках; в flex-логотипах отступ
   задаёт gap, поэтому собственного отступа у знака нет.
======================================== */

.brand-mark {
    display: inline-block;
    height: 16px;
    width: auto;
    vertical-align: middle;
    flex: none;
}

/* Там, где логотип не flex, нужен отступ до надписи */
.footer-logo .brand-mark {
    height: 20px;
    margin-right: 12px;

    /* Подвал тёмный: знак светлеет, чтобы не потеряться */
    filter: brightness(0) invert(0.92);
}

.brand-mark--md {
    height: 22px;
}

.brand-mark--lg {
    height: 36px;
}