/* Шкала оформления: единственное место, где заданы цвета, кегли и размеры.
 *
 * Зачем отдельным файлом. Блоки мы подсматриваем в разных местах — у одних
 * берём шапку, у других раскладку дашборда, у третьих карточку товара. Чтобы
 * это не превратилось в лоскутное одеяло, композицию берём где угодно, а
 * значения — только отсюда. Тогда происхождение блока в готовой странице не
 * читается: всё нарисовано одной краской.
 *
 * Правило простое и жёсткое: в остальных файлах не должно появляться цветов
 * и размеров числом. Нужен новый оттенок или ступень кегля — сначала
 * добавляем сюда, потом пользуемся.
 *
 * Подключается ПЕРВЫМ, до shop.css и adm.css: они пользуются этими именами,
 * а не заводят свои. Раньше значения лежали в четырёх местах сразу — в
 * «:root» внутри shop.css, во втором объявлении «body» там же и в трёх
 * блоках «.адм» внутри adm.css, — и часть из них молча перебивала другую.
 *
 * Устроено в три слоя:
 *   1. «:root» — витрина. Здесь базовые значения на весь магазин.
 *   2. «.адм»  — панель управления. Те же имена, свои значения.
 *   3. Слой имён панели Entergalactic VPN — чтобы готовые элементы оттуда
 *      переносились файлом и работали без переделки.
 */

/* ═══ ВИТРИНА ═══════════════════════════════════════════════════════ */
:root{
  /* ── Цвета ──────────────────────────────────────────────────────── */
  /* Акцент подставляется настройкой магазина в base.html: платформа
     ставится разным продавцам, и цвет у каждого свой. */
  --accent:#a00000;
  --accent-текст:#ffffff;
  /* Тёмный и мягкий оттенки акцента: наведение на кнопку и подложка
     выделенной строки. Считать их через color-mix нельзя — цвет приходит
     настройкой магазина, а подмешивание белого к тёмно-красному даёт розовый.
     Значения подобраны так же, как в панели: тот же красный, тот же шаг. */
  --accent-тёмный:#800000;
  --accent-мягкий:#fdecec;

  --фон:#ffffff;              /* полотно страницы */
  --фон-2:#f6f6f7;            /* подложка карточек и строк */
  --фон-3:#ededee;            /* нажатое состояние, заглушки снимков */
  --текст:#181717;            /* заголовки и всё, что должно читаться первым */
  --текст-2:#474546;          /* второстепенный текст */
  --приглушённый:#66646a;     /* подписи, единицы, даты */
  --граница:#e7e6e8;          /* линии карточек и таблиц */
  --линия-поля:#c8c6cb;       /* рамка полей ввода и кнопок-призраков */

  /* Основной текст витрины мягче заголовочного: сплошной «--текст» на
     длинных описаниях товара читается жёстко. */
  --чернила:#3a3a3a;
  --тихий-цвет:#9c9a9a;
  --линия-тихая:#e6e4e2;

  /* ── Состояния. Красный здесь означает опасность, а не бренд ────── */
  --хорошо:#157a46;
  --плохо:#b3261e;    --плохо-фон:#fdecea;
  --внимание:#8a5d00; --внимание-фон:#fcf3dc;

  /* ── Размеры ────────────────────────────────────────────────────── */
  --радиус:14px;
  --радиус-мелкий:10px;
  --радиус-xs:8px;            /* мелкие плашки внутри строк */
  --высота-кнопки:44px;       /* цель касания по норме доступности */
  --отступ:16px;
  --отступ-крупный:32px;

  /* ── Шрифты и тени ──────────────────────────────────────────────── */
  --шрифт:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --антиква:ui-serif,Georgia,"Times New Roman",serif;
  --тень:0 1px 2px rgba(23,22,26,.06);
  --тень-крупная:0 8px 28px rgba(23,22,26,.10);
}

/* ═══ ПАНЕЛЬ УПРАВЛЕНИЯ ═════════════════════════════════════════════ */
/* Те же имена, другие значения: панель плотнее витрины и спокойнее по цвету.
   Красный берётся здесь, а не из настроек магазина: витрина красится в цвет
   клиента, а панель — продукт, и выглядеть должна одинаково у всех. */
.адм{
  --accent:#a00000;                 /* фирменный красный */
  --accent-текст:#ffffff;
  --accent-тёмный:#800000;
  --accent-мягкий:#fdecec;          /* подложка выделенной строки */

  /* Фон рабочей области отдельным токеном: он темнее витринного «фон-2»,
     иначе белые карточки на нём не видно — именно это и слилось. */
  --фон-панели:#f2f3f5;
  --фон-2:#f6f7f9;
  --фон-3:#eceef2;
  --граница:#e4e7ec;
  --линия-поля:#c4c9d2;
  --текст:#141821;
  --текст-2:#3d434f;
  --приглушённый:#5f6673;

  --хорошо:#0f7a44; --хорошо-фон:#e6f6ec;
  --ждёт:var(--внимание); --ждёт-фон:var(--внимание-фон);
  --синий:#1c6cae; --синий-фон:#e9f2fb;

  --радиус:12px;
  --радиус-мелкий:8px;
  /* Ширина бокового меню нужна и самому меню, и всплывающей панели рядом:
     два числа в двух местах однажды разъезжаются. */
  --ширина-меню:212px;
  --верх-панели:0px;                /* отступ прилипающих шапок сверху */
  --тень:0 1px 2px rgba(16,20,28,.05);
  --тень-крупная:0 12px 32px rgba(16,20,28,.14);

  /* Имена из первого захода по панели. Оставлены псевдонимами: разметка на
     них уже написана, а два имени одного цвета лучше, чем два цвета. */
  --красный:var(--accent);
  --красный-тёмный:var(--accent-тёмный);
  --красный-мягкий:var(--accent-мягкий);
  --белый:var(--фон);
  --линия:var(--граница);
  --тихий:var(--приглушённый);
}

/* ═══ ИМЕНА ПАНЕЛИ ENTERGALACTIC VPN ════════════════════════════════ */
/* Каталог элементов панели VPN (кнопки, поля, таблицы, окна, шторки) написан
 * на латинских именах. Чтобы переносить оттуда готовый элемент файлом, а не
 * переписывать его руками, латинские имена заведены здесь псевдонимами к
 * нашим.
 *
 * Слой объявлен и на «:root», и на «.адм» намеренно. Псевдоним вычисляется
 * там, где объявлен, а не там, где применён: объявь мы его только на «:root»,
 * панель унаследовала бы уже готовые витринные цвета и красный не подхватила
 * бы никогда. Объявленный дважды, он на каждом уровне берёт свои значения.
 *
 * Каталог VPN ещё пополняется. Набор ниже полный по theme.css, а не по тому,
 * что уже перенесено: новый элемент приедет и заработает без правки шкалы.
 */
:root, .адм{
  /* Полотно: на витрине подложка, в панели — свой фон рабочей области. */
  --bg:var(--фон-панели, var(--фон-2));
  --surface:var(--фон);
  --surface-2:var(--фон-2);
  --surface-3:var(--фон-3);
  --border:var(--граница);
  --border-soft:var(--граница);
  --control-line:var(--линия-поля);
  --text:var(--текст);
  --text-2:var(--текст-2);
  --muted:var(--приглушённый);
  --faint:var(--приглушённый);

  --accent-hover:var(--accent-тёмный, #6a4da8);
  --on-accent:var(--accent-текст);
  --accent-soft:color-mix(in oklab, var(--accent) 10%, var(--surface));
  --accent-line:color-mix(in oklab, var(--accent) 26%, var(--surface));

  --good:var(--хорошо);            --good-bg:var(--хорошо-фон, #e6f6ec);
  --warn:var(--внимание);          --warn-bg:var(--внимание-фон);
  --info:var(--синий, #1c6cae);    --info-bg:var(--синий-фон, #e9f2fb);
  --bad:var(--плохо);              --bad-bg:var(--плохо-фон);
  --violet:#6a55c7;                --violet-bg:#eeeafb;
  --off:#8e8e93;

  --side:var(--фон);
  --side-text:var(--текст-2);
  --side-muted:var(--приглушённый);
  --side-active:var(--фон-2);
  --side-on-active:var(--текст);
  --side-w:var(--ширина-меню, 212px);

  --radius:var(--радиус);
  --radius-sm:var(--радиус-мелкий);
  --radius-xs:var(--радиус-xs);
  --radius-lg:var(--радиус);
  --pill:9999px;
  --shadow-sm:var(--тень);
  --shadow-md:var(--тень);
  --shadow-lg:var(--тень-крупная);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:28px;

  --font:var(--шрифт);
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;

  /* Шкала кегля панели. Ступени подобраны там и меняться не должны: элемент
     переносится вместе с ними, иначе разница в полпикселя читается не как
     замысел, а как опечатка. */
  --fs-2xs:10.5px;   /* надзаголовки, разрядка */
  --fs-xs:11.5px;    /* подписи под полем, мелкие пояснения */
  --fs-sm:12.5px;    /* кнопки, второстепенный текст */
  --fs-base:13px;    /* основной текст интерфейса */
  --fs-md:13.5px;    /* заголовок карточки, вкладка */
  --fs-lg:14.5px;    /* заголовок окна, название сервиса */
  --fs-xl:17px;      /* заголовок раздела на телефоне */
  --fs-2xl:19px;     /* заголовок раздела */
  --fs-3xl:23px;     /* крупные числа на дашборде */
  /* Кегль поля на телефоне. Не часть шкалы, а требование платформы: мобильный
     Safari увеличивает страницу при касании поля с текстом мельче 16px, и
     вернуть масштаб можно только руками. */
  --fs-touch:16px;

  /* Размеры управляющих элементов — один ряд на всю панель. Кнопка, поле и
     квадратная кнопка-иконка равны по высоте: только так правый край строки
     совпадает во всех разделах. */
  --ctl:36px;        /* кнопка, поле ввода, кнопка в шапке */
  --ctl-sm:30px;     /* кнопка-иконка внутри строки */
  --ic:15px;         /* значок внутри кнопки */
  --ic-sm:14px;      /* значок внутри кнопки-иконки */

  /* Квадрат со значком и аватарка — четыре ступени, больше не заводим.
     Скругление растёт вместе с размером, поэтому форма у всех одна. */
  --box-sm:28px; --box-sm-r:8px;   /* значок в строке, в шапке карточки */
  --box:32px;    --box-r:9px;      /* основной значок, аватарка в списке */
  --box-lg:40px; --box-lg-r:11px;  /* логотип сервиса */
  --box-xl:48px; --box-xl-r:13px;  /* аватарка в шапке карточки клиента */

  /* ── Размеры блоков витрины ─────────────────────────────────────────
     Приехали вместе с блоками магазина: шапкой, корзиной, страницей
     товара, оформлением заказа. Без них блок не ломается заметно — он
     ужимается до ширины содержимого, и понять, что дело в пропавшем
     значении, а не в вёрстке, тяжело. Поэтому заводим все сразу. */

  /* Колонки: широкий блок, узкая колонка по центру, строка текста */
  /* Колонка сайта тянется во всю ширину окна: так делают крупные магазины.
     Строка ТЕКСТА при этом остаётся узкой (--узк-w, --чит-w) — растянутый на
     два метра абзац не читается. Вернуть колонку — поставить здесь 1200px. */
  --shop-w:100%; --узк-w:720px; --чит-w:640px;
  /* Поля по краям: без них товары упираются в край экрана. */
  --поля-сайта:clamp(var(--sp-4), 3vw, var(--sp-6));
  /* Наименьшая ширина колонки с текстом рядом с картинкой. Уже неё
     заголовок товара ломается по одному слову в строке. */
  --сред-мин:320px;

  /* Корзина и оформление: снимок товара в строке и колонка с итогом.
     Одни и те же в обоих местах — человек приходит в оформление прямо из
     корзины и сверяет состав глазами. */
  --cart-pic:88px; --cart-pic-sm:64px; --cart-sum-w:320px;
  /* Галерея на странице товара: шире блока покупки, потому что фотография —
     главный довод купить. */
  --gal-w:440px;

  /* Плитка раздела на главной: на широком экране и на телефоне */
  --плитка-h:180px; --плитка-h-sm:132px;
  /* Портрет человека: блок команды, карточка автора статьи */
  --лицо:96px;
  /* Ширина кнопки «Найти», слитой с полем поиска: от неё считается место
     под крестик очистки, иначе крестик ложится на кнопку. */
  --поиск-кн:92px;

  /* Кружок с числом: товары в корзине, включённые фильтры, непрочитанные.
     Кегль ниже самой мелкой ступени намеренно — это не текст, а метка на
     значке: её не читают, а замечают. */
  --счёт:18px; --fs-счёт:10px;
  /* Наименьшая цель касания: WCAG 2.5.8, уровень AA. Мельче в цель не
     попадают пальцем и жмут по два-три раза. */
  --цель:24px;
  /* Чат: кнопка в углу и окно переписки на компьютере. На телефоне окно
     занимает экран целиком, и эти значения там не участвуют. */
  --чат-кн:52px; --чат-w:360px; --чат-h:480px;
}

/* ═══ ТЁМНАЯ ТЕМА ═══════════════════════════════════════════════════
 *
 * Ставится признаком на <html>: data-theme="dark". Раньше признак менялся,
 * а менять было нечего — кнопка «Сменить тему» в каталоге нажималась вхолостую.
 *
 * Переопределяем русские токены: латинские имена набора — псевдонимы к ним
 * (см. выше), поэтому весь набор темнеет следом, ни одного правила трогать
 * не нужно.
 *
 * Второй селектор — для панели управления: у неё свои значения тех же имён,
 * и без него админка осталась бы светлой посреди тёмной страницы.
 */
:root[data-theme="dark"],
:root[data-theme="dark"] .адм{
  /* Акцент светлее витринного: тёмно-красный на тёмном фоне сливается, и
     главная кнопка перестаёт быть главной. Оттенок тот же, светлота выше. */
  --accent:#e05252;
  --accent-текст:#1a0f0f;
  --accent-тёмный:#c94141;
  --accent-мягкий:#3a1f1f;

  --фон:#15161a;              /* полотно страницы */
  --фон-панели:#101115;
  --фон-2:#1c1e24;            /* подложка карточек и строк */
  --фон-3:#252831;            /* нажатое состояние, заглушки снимков */
  --текст:#f2f2f3;
  --текст-2:#c9c8cc;
  --приглушённый:#9a99a1;
  --граница:#2c2f38;
  --линия-поля:#4a4e5a;

  --чернила:#dedde2;
  --тихий-цвет:#8b8a92;
  --линия-тихая:#2a2c34;

  /* Состояния: на тёмном нужны светлее, иначе читаются как грязь */
  --хорошо:#4dc08a;   --хорошо-фон:#152a24;
  --плохо:#ff8a80;    --плохо-фон:#2e1a19;
  --внимание:#e0a63a; --внимание-фон:#2b2416;
  --синий:#6ab7ff;    --синий-фон:#14273a;

  /* Тень на тёмном не видна — её работу делает граница, поэтому мягче */
  --тень:0 1px 2px rgba(0,0,0,.4);
  --тень-крупная:0 8px 28px rgba(0,0,0,.55);
}