/* Токены дизайна Mc.House — единственный источник значений (задача Э-1.7).
 *
 * Правило: ни один экран не имеет права задать свой цвет, размер текста,
 * отступ, радиус или тень. Всё берётся отсюда переменной. Понадобилось новое
 * значение — сначала спрашиваем заказчика и добавляем сюда, потом используем.
 *
 * Палитра взята из демонстрационной страницы Mc.House, которую заказчик уже
 * видел и принял. Каждый цвет проверен расчётом контраста (тест
 * test_e17_kontrast_ne_nizhe_4_5), затемнённые оттенки — там, где исходный
 * демонстрационный цвет не проходил порог 4,5 для читаемости.
 */

:root {
    /* --------------------------------------------------------------- */
    /* Цвет: ровно десять переменных. Одиннадцатой не заводить —        */
    /* понадобился новый оттенок, значит экран перегружен.              */
    /* --------------------------------------------------------------- */

    /* Фон страницы: очень светлый серый, чтобы белые панели читались как панели. */
    --fon-stranicy: #f6f6f7;
    /* Фон карточек, панелей и таблиц. */
    --fon-karty: #ffffff;
    /* Границы и разделители: тёплый светлый, а не холодный серый. */
    --liniya: #ebe7e4;
    /* Основной текст. Контраст 15,8 на фоне страницы и 17,0 на карточке. */
    --tekst: #1c1c1e;
    /* Подписи и второстепенное. Демонстрационный #8a8a8e давал 3,2 — не проходит;
       затемнён до 5,1 на фоне страницы, 5,5 на карточке и 4,6 на самой тёмной
       из плашек-заливок: приглушённый текст читается на любой подложке основы. */
    --tekst-tihiy: #69696e;
    /* Фирменный оранжевый Mc.House, глубокий оттенок. Белая буква на нём — 4,6.
       Яркий демонстрационный #E8622A давал 3,4 и по читаемости не проходит. */
    --akcent: #c94f1d;
    /* Текст и значки на акценте. */
    --akcent-tekst: #ffffff;
    /* Успех, положительный статус. Белая буква — 5,4 (демонстрационный #2f9e5f давал 3,4). */
    --uspeh: #1e7a45;
    /* Предупреждение, промежуточный статус. Белая буква — 5,9 (демонстрационный #e6a23c не проходил). */
    --vnimanie: #8a5a00;
    /* Ошибка, отрицательный статус. Белая буква — 6,5. */
    --oshibka: #b3261e;

    /* Заливки-плашки — это не новые цвета, а те же шесть, разбавленные белым.
       Так фирменный вид демонстрационной страницы сохраняется, а источник
       значения остаётся один: поменяли акцент — поменялись и плашки. */
    --zalivka-akcenta: color-mix(in srgb, var(--akcent) 10%, var(--fon-karty));
    --zalivka-akcenta-slabaya: color-mix(in srgb, var(--akcent) 4%, var(--fon-karty));
    --zalivka-uspeha: color-mix(in srgb, var(--uspeh) 10%, var(--fon-karty));
    --zalivka-vnimaniya: color-mix(in srgb, var(--vnimanie) 10%, var(--fon-karty));
    --zalivka-oshibki: color-mix(in srgb, var(--oshibka) 10%, var(--fon-karty));
    --zalivka-tihaya: color-mix(in srgb, var(--tekst-tihiy) 8%, var(--fon-karty));

    /* --------------------------------------------------------------- */
    /* Отступы: только эта шкала. Промежуточных значений не существует —  */
    /* ровная шкала и есть причина, почему интерфейс выглядит собранным.  */
    /* --------------------------------------------------------------- */
    --otstup-4: 4px;
    --otstup-8: 8px;
    --otstup-12: 12px;
    --otstup-16: 16px;
    --otstup-24: 24px;
    --otstup-32: 32px;
    --otstup-48: 48px;
    --otstup-64: 64px;

    /* --------------------------------------------------------------- */
    /* Текст: четыре размера, два веса. Больше не нужно.                */
    /* Основной текст не мельче 16px: на телефоне поля мельче 16px       */
    /* заставляют браузер зумить страницу, а администратор точки          */
    /* работает именно с телефона (Э-2).                                 */
    /* --------------------------------------------------------------- */
    --shrift: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --razmer-zagolovok-ekrana: 26px;
    --razmer-zagolovok-bloka: 19px;
    --razmer-osnovnoy: 16px;
    --razmer-podpis: 14px;

    --ves-obychnyy: 400;
    --ves-zhirnyy: 600;

    --mezhstrochnyy: 1.5;
    --mezhstrochnyy-zagolovok: 1.25;

    /* --------------------------------------------------------------- */
    /* Форма: один радиус на всё плюс «круглый» для значков.            */
    /* Ровно две тени: лёгкая — карточка, заметная — всплывающее окно.   */
    /* Тень не заменяет границу.                                        */
    /* --------------------------------------------------------------- */
    --skruglenie: 12px;
    --skruglenie-krug: 999px;

    --ten-karty: 0 1px 2px color-mix(in srgb, var(--tekst) 6%, transparent);
    --ten-okna: 0 8px 24px color-mix(in srgb, var(--tekst) 18%, transparent);

    /* --------------------------------------------------------------- */
    /* Ширины.                                                          */
    /* --------------------------------------------------------------- */
    --shirina-rabochey-oblasti: 1240px;
    --shirina-kolonki-teksta: 72ch;
    --shirina-menyu: 232px;
}