/* Палитра и размеры — отдельным файлом.
 *
 * Вынесены сюда, а не оставлены в app.css, по одной причине: страницы
 * разделов и блюд подключают app.css напрямую, и когда :root жил внутри
 * него, любая перестановка правил гасила цвета на половине сайта.
 * Отдельный файл подключается первым и всегда целиком.
 *
 * ── О палитре ──
 *
 * Кремовое основание вместо прежнего тёмного. Тёмный «мир углей» выглядел
 * эффектно, но еда на тёмном читается хуже: снимки блюд сняты при тёплом
 * свете, и на чёрном фоне они теряют аппетитность, ради которой их и снимали.
 * Кремовый работает наоборот — он продолжает свет самого снимка.
 *
 * Терракота одна на весь сайт: кнопки, активный раздел, цена со скидкой.
 * Второго яркого цвета нет намеренно — когда ярких два, взгляд не знает,
 * куда смотреть, и «В корзину» перестаёт быть главной кнопкой на странице.
 */

:root {
    /* ── основания ── */
    --paper:      #FAF6EF;   /* фон страницы */
    --paper-2:    #F4EEE2;   /* боковая панель, полосы */
    --card:       #FFFFFF;   /* карточки блюд */
    --sunk:       #EFE7D9;   /* поля ввода, вдавленное */

    /* ── чернила ── */
    --coal:       #1A1613;   /* заголовки и основной текст */
    --ink:        #2C2620;   /* текст карточек */
    /* Подобран расчётом, а не на глаз: прежний #8A8177 давал 3,3 к 1
       на кремовом — ниже нормы 4,5 для обычного текста. Этим цветом
       набраны вес, размер компании и все приписки, то есть половина
       полезного в карточке. Проверка нашла 214 таких мест. */
    --ash:        #6F675F;   /* приписки, вес, «на 2-3 человек» */
    --line:       #E6DDCC;   /* разделители и рамки */

    /* ── акцент ── */
    /* Терракота из макета была #D4553C — белый текст на ней давал 4,07,
       чуть ниже нормы. Затемнена ровно настолько, чтобы кнопка прошла:
       на глаз разницы нет, а надпись на ней читается. */
    --ember:      #C74F38;   /* фон кнопок: белый на нём 4,56 */
    --ember-dark: #A83E29;   /* наведение и нажатие */
    --ember-text: #B24732;   /* терракота ТЕКСТОМ: 4,5 на подложке пункта */
    --ember-soft: #F7E6DF;   /* подложка активного пункта меню */
    --on-ember:   #FFFFFF;   /* текст на терракоте */

    /* ── смысловые ── */
    --leaf:       #3F6B3A;   /* «доставка бесплатно», успех */
    /* Тёмнее, чем просится глазу: прежний #C8901E давал на кремовом
       2,75 к 1 — ниже порога даже для крупного текста. */
    --gold:       #9A6B0E;   /* оценка, «хиты недели» */

    /* ── шрифты ──
       Отдельными переменными, потому что старые правила пишут их внутри
       сокращения font: — а недействительная переменная там рушит не цвет,
       а всё правило целиком, вместе с размером и начертанием. */
    --text:  "Golos Text", system-ui, sans-serif;   /* основной */
    --disp:  Bitter, Georgia, serif;                /* заголовки */
    --char:  Bitter, Georgia, serif;                /* акцентный */

    /* ── формы ── */
    --r-sm:       10px;
    --r-md:       14px;
    --r-lg:       20px;

    /* ── тени ──
       Мягкие и тёплые: холодная серая тень на кремовом читается как грязь. */
    --sh-1: 0 1px 2px rgba(26, 22, 19, .04);
    --sh-2: 0 2px 4px rgba(26, 22, 19, .05), 0 10px 24px -14px rgba(26, 22, 19, .18);
    --sh-3: 0 4px 8px rgba(26, 22, 19, .06), 0 18px 40px -20px rgba(26, 22, 19, .25);

    /* ── каркас ──
       Ширина боковой панели участвует и в разметке, и в отступах контента,
       поэтому живёт здесь, а не двумя одинаковыми числами в разных правилах. */
    --side:       260px;
    --topbar:     68px;
    --wrap:       1180px;
}