/*
 * Единственное место, где живут цвета, радиусы, отступы и длительности.
 * Литеральных #rrggbb в остальных файлах и в разметке быть не должно:
 * смена палитры — правка этого файла, а не поиск по проекту.
 *
 * Значения сняты из Figma (Styles, 2026-08-24). Градиенты, у которых в имени
 * стиля нет hex, ещё не сняты — они появятся здесь на этапе 1.
 */
:root {
    /* палитра: сырые цвета из макета */
    --c-conifer: #013220;          /* Active elem — хвойный */
    --c-fuchsia: #ff62ff;          /* Active elem 2, светлый конец градиента */
    --c-fuchsia-deep: #c43cc4;     /* Active elem 2, тёмный конец */
    --c-lilac-pale: #e9ebf3;       /* active elem 1.2 */
    --c-ink: #363739;              /* TXT */
    --c-paper: #f5f5f5;            /* TXT F5F5F5 */
    --c-param: #9a9b9c;            /* TXT Param */
    --c-inactive: #b7b7b8;         /* Inactive */
    --c-shape: #efefef;            /* Shape */
    --c-white: #ffffff;            /* Shape ffffff */
    --c-dark: #232529;             /* Shape main */
    --c-black: #000000;            /* только под сторис: пустота за кадром */
    --c-ink-strong: #111111;       /* текст на белой кнопке поверх картинки */
    --c-gold-bg: #f6dcae;          /* плашка PRO */
    --c-gold-ink: #a4681a;
    /* светлая мята: акцент тёмной стороны, хвойный там не виден */
    --c-mint: #7fe3b0;

    /*
     * Те же цвета составляющими — для полупрозрачных слоёв.
     *
     * `rgba()` не умеет брать альфу от переменной с готовым цветом, а
     * относительный синтаксис (`rgb(from …)`) поддержан ещё не везде. Тройка
     * чисел решает это без единой лишней зависимости: `rgba(var(--c-ink-rgb), .5)`.
     */
    --c-white-rgb: 255, 255, 255;
    --c-paper-rgb: 245, 245, 245;
    --c-ink-rgb: 35, 37, 41;
    --c-fuchsia-rgb: 255, 98, 255;
    --sky-0-rgb: 1, 16, 12;
    --sky-1-rgb: 4, 35, 26;
    /* тёплые блики неба: свет звезды и её ореол */
    --c-glow-rgb: 255, 236, 200;
    --c-glow-warm-rgb: 255, 190, 120;
    --c-conifer-rgb: 1, 50, 32;
    --c-fuchsia-deep-rgb: 196, 60, 196;
    --c-black-rgb: 0, 0, 0;
    --sky-2-rgb: 11, 59, 42;
    /* холодный ореол объектов неба */
    --c-violet-rgb: 160, 120, 255;

    /* ночная сторона: лендинг и «Моё небо» */
    --sky-0: #01100c;
    --sky-1: #04231a;
    --sky-2: #0b3b2a;

    /*
     * Небо «Моего неба» по времени суток. Ночь берёт цвета выше — она же
     * фирменная тёмная сторона; день и закат живут отдельными тройками,
     * потому что экран может провисеть открытым через закат.
     */
    --sky-day-0: #2c6f9c;
    --sky-day-1: #5fa3cd;
    --sky-day-2: #a8d4ea;
    --sky-dusk-0: #0f0a22;
    --sky-dusk-1: #3c1f4f;
    --sky-dusk-2: #8c3d6b;

    /* роли: компоненты знают только их */
    --accent: var(--c-conifer);
    --accent-2: var(--c-fuchsia);
    --grad-accent: linear-gradient(135deg, var(--c-fuchsia), var(--c-fuchsia-deep));
    --on-accent: var(--c-white);
    --text: var(--c-ink);
    --text-muted: var(--c-param);
    --surface: var(--c-white);
    --surface-sunken: var(--c-shape);
    /* шторка красится фоном страницы, а не поверхностью — на острове он тоже дневной */
    --background: var(--c-paper);
    --background: var(--c-paper);
    --border: var(--c-lilac-pale);
    --shadow-card: 0 8px 24px rgba(var(--c-ink-rgb), 0.08);
    --shadow-bar: 0 -4px 20px rgba(var(--c-ink-rgb), 0.06);

    /* тёмная сторона: сторис, небо, лендинг */
    --on-dark: var(--c-white);
    --on-dark-muted: rgba(var(--c-white-rgb), 0.7);
    --void: var(--c-black);
    /* подложка под белой кнопкой поверх картинки */
    --surface-solid: var(--c-white);
    --on-surface-solid: var(--c-ink-strong);
    --scrim: rgba(0, 0, 0, 0.55);
    --glass-light: rgba(var(--c-white-rgb), 0.16);

    /* сетка из макета: колонка 380, поля 20 */
    --col: 380px;
    --col-max: 480px;
    --gap: 20px;
    --gap-s: 12px;
    --gap-xs: 8px;

    --radius: 20px;
    --radius-s: 12px;
    --radius-pill: 999px;

    --header-h: 56px;

    /* нижняя панель из макета: плашка 340×70 с отступом 20 по краям */
    --tabbar-h: 70px;
    --tabbar-gap: 20px;

    /* Шрифт макета. Системный стек оставлен фолбэком — см. @font-face ниже */
    --font: "Gilroy", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* анимации: длительности и кривые тоже токены (этап 1) */
    --dur-fast: 120ms;
    --dur: 220ms;
    --dur-slow: 420ms;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Уважение к системной настройке: движение гасится везде разом (этап 26) */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 1ms;
        --dur: 1ms;
        --dur-slow: 1ms;
    }
}

/*
 * Gilroy. Из двадцати присланных начертаний подключены три: обычное,
 * полужирное и жирное. Каждый TTF весит около 85 КБ, и все двадцать —
 * это почти два мегабайта ради курсивов, которых в макете нет.
 *
 * font-display: swap — текст виден сразу системным шрифтом и перерисовывается,
 * когда доедет Gilroy. Обратный вариант (block) даёт пустой экран на секунду.
 *
 * Формат — woff2, TTF оставлен запасным. Прислали TTF, и он ехал как есть:
 * 84 КБ на начертание, причём без сжатия — gzip в nginx на них по факту не
 * срабатывал. woff2 сжат внутри себя и весит 26 КБ, то есть треть; это самая
 * дешёвая правка скорости во всём проекте, и она же убирает из отчёта
 * Lighthouse цепочку критических запросов длиной в две секунды.
 *
 * Файлы собраны из тех же TTF (`wawoff2`), сами TTF лежат рядом: строка
 * `src` перебирает форматы по порядку, и браузер, который woff2 не понимает,
 * молча возьмёт второй.
 */
@font-face {
    font-family: "Gilroy";
    src: url("/assets/fonts/Gilroy/Gilroy-Regular_0.woff2") format("woff2"),
         url("/assets/fonts/Gilroy/Gilroy-Regular_0.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("/assets/fonts/Gilroy/Gilroy-Semibold_0.woff2") format("woff2"),
         url("/assets/fonts/Gilroy/Gilroy-Semibold_0.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: url("/assets/fonts/Gilroy/Gilroy-Bold_0.woff2") format("woff2"),
         url("/assets/fonts/Gilroy/Gilroy-Bold_0.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ============================================ тёмная тема (этапы 1 и 22) */

/*
 * Приложение и админка стоят на звёздном небе, и это не косметика: меняется
 * не картинка за содержимым, а вся роль цветов. Ради этого и делались два
 * слоя переменных — здесь переопределяются только **роли**, а палитра
 * остаётся той же. Ни один компонент об этом не знает и не правится.
 *
 * Класс на <body>, а не медиазапрос `prefers-color-scheme`: тёмная сторона
 * здесь не настройка системы, а решение о том, как выглядит приложение.
 * Лендинг остаётся со своим `.night` — у него другая типографика.
 */
.is-night {
    /*
     * Хвойный на ночном фоне не виден вовсе — он почти чёрный. Роль акцента
     * поэтому берёт светлая мята: то же место в иерархии, но читаемая.
     * Фуксия остаётся вторым акцентом, как и на светлой стороне.
     */
    --accent: var(--c-mint);
    --on-accent: var(--sky-0);

    --text: var(--c-paper);
    --text-muted: rgba(var(--c-paper-rgb), 0.66);

    --background: var(--sky-0);
    --surface: rgba(var(--c-paper-rgb), 0.07);
    --surface-sunken: rgba(var(--c-paper-rgb), 0.04);
    --surface-solid: var(--sky-1);
    --on-surface-solid: var(--c-paper);
    --border: rgba(var(--c-paper-rgb), 0.16);

    /* тени на тёмном не работают: их роль берёт светлая линия по краю */
    --shadow-card: 0 0 0 1px rgba(var(--c-paper-rgb), 0.08);
    --shadow-bar: 0 -4px 24px rgba(var(--c-black-rgb), 0.45);
}

/*
 * Светлый остров на тёмном небе.
 *
 * Карточки, окна и плитки остаются дневными — белыми и с тёмным текстом, как
 * в макете. Ночным становится только то, что вокруг них: небо, шапка, панель
 * вкладок и подписи прямо на фоне.
 *
 * Сделано переопределением ролей, а не перекраской каждого элемента: свойства
 * наследуются, поэтому внутри острова весь текст, ссылки и границы сами
 * возвращаются к дневным значениям. Ни один компонент об этом не знает.
 */
.is-night .card,
.is-night .tile,
.is-night .notice,
.is-night .sheet__box,
.is-night .media-day,
.is-night .dream-card,
.is-night .rail__circle,
.is-night .circle__ring,
.is-night .btn-pill,
.is-night .adm__card,
.is-night .adm__rows {
    --text: var(--c-ink);
    --text-muted: var(--c-param);
    --accent: var(--c-conifer);
    --on-accent: var(--c-white);
    --surface: var(--c-white);
    --surface-sunken: var(--c-shape);
    /* шторка красится фоном страницы, а не поверхностью — на острове он тоже дневной */
    --background: var(--c-paper);
    --border: var(--c-lilac-pale);
    --shadow-card: 0 8px 24px rgba(var(--c-ink-rgb), 0.18);

    color: var(--text);
}