/* Общий слой оформления M5 G90.
   СОБИРАЕТСЯ автоматически при сборке шаблона - править руками
   бесполезно, правка потеряется. Источники: помеченный блок
   «ОБЩИЕ ТОКЕНЫ» в прототипе мини-аппа, tokens_extra.css и
   tokens_site.css рядом со сборщиком. */

:root, :root[data-theme="dark"]{
  --bg:#08090b;
  --glass:rgba(255,255,255,.05);
  --glass-hi:rgba(255,255,255,.085);
  --glass-edge:rgba(255,255,255,.11);
  --glass-top:rgba(255,255,255,.12);
  --blur:18px;

  --card:rgba(255,255,255,.05);
  /* Плашка внутри карточки - выбор срока, «Переименовать». В тёмной
     теме значения повторяют прежние, чтобы вид не изменился ни на
     пиксель; светлая переопределяет их ниже. */
  --chip:var(--glass);
  --chip-edge:var(--glass-edge);
  --chip-line:transparent;
  --text:#f4f6f8;
  --muted:#9aa2ad;
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.30);

  --btn-bg:linear-gradient(180deg,rgba(255,255,255,.21),rgba(255,255,255,.085));
  --btn-bg-hi:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.14));
  --btn-border:rgba(255,255,255,.30);
  --btn-text:#ffffff;
  --btn-hi:rgba(255,255,255,.55);
  --btn-lo:rgba(0,0,0,.32);

  --accent:#ffffff;
  --live:#2fd06a;
  --warn:#ffbb3d;
  --danger:#ff5b52;
  --glow-blur:30px; --glow-k:1;
  --danger-soft:rgba(255,91,82,.14);
  --danger-soft-hi:rgba(255,91,82,.22);
  --danger-edge:rgba(255,91,82,.38);
  --link:#f4f6f8;

  --tint:rgba(255,255,255,.09);
  --tint-warn:rgba(255,187,61,.14);
  --tint-off:rgba(152,160,170,.14);
  /* Liquid Glass: кромка по контуру и преломление фона */
  --rim:linear-gradient(145deg,
          rgba(255,255,255,.7) 0%, rgba(255,255,255,.12) 26%,
          rgba(255,255,255,0) 52%, rgba(255,255,255,.16) 74%,
          rgba(255,255,255,.45) 100%);
  --refract:blur(26px) saturate(190%) brightness(1.06);
  --spec:rgba(255,255,255,.18);

  --carbon:rgba(255,255,255,.02);
  --halo:rgba(255,255,255,.06);
  --r:22px;

/* ---------- Панель ----------
   Второй, более плотный вид стекла. Тонкая плёнка --glass живёт на
   ровном фоне мини-аппа; на витрине то же стекло лежит поверх
   фотографии, и сквозь плёнку .05 читается кузов машины, а не текст.
   Поэтому у панели своя заливка, своё размытие и своя тень: шапка,
   кнопки-таблетки, карточки тарифов и пульт цвета собраны из неё. */
--pane-bg:rgba(24,26,31,.52);
--pane-edge:rgba(255,255,255,.14);
--pane-hi:rgba(255,255,255,.20);
--pane-shade:rgba(0,0,0,.72);
--pane-blur:22px;

/* ---------- Акцент ----------
   Единственный цвет во всём оформлении. Значение подставляет скрипт
   по выбору человека; здесь - то, что видит гость, ещё ничего не
   выбравший. --on-acc - текст, который на этом цвете читается. */
--acc:#A05FF3;
--on-acc:#0a0a0b;
/* Светлая подложка ПОВЕРХ акцентной заливки: плашки состояния,
   круглые кнопки и главная кнопка на карточке подписки. Это не то же
   самое, что --on-acc: у сиреневого читаемый текст тёмный, а плашка
   на нём обязана быть светлой - тёмная плашка с тёмным текстом
   превращается в чёрный прямоугольник без надписи. Ровно это и
   вышло, когда я взял одно имя вместо двух. Белая подложка работает
   на всех восьми цветах, потому что все они средней яркости. */
--acc-paper:#ffffff;
--acc-ink:#14121C;

/* ---------- Скругления ----------
   Одной лесенкой, а не по вкусу на каждом элементе. Радиус растёт
   вместе с размером: маленькой плашке большой радиус превращает её
   в таблетку, а большой карточке маленький - в коробку. */
--r-xs:10px;
--r-s:16px;
--r-m:22px;
--r-l:30px;
--r-xl:40px;
--r-pill:999px;

/* ---------- Поля и движение ----------
   --pad - общая колея страницы: по ней выравнивается всё, от логотипа
   до подвала. --ease и --dur держат единый темп: разнобой в скоростях
   читается как несогласованность, даже когда не осознаётся. */
--pad:clamp(20px, 4.2vw, 64px);
--bar-inset:10px;
--ease:cubic-bezier(.2,.8,.3,1);
--dur:.42s;

/* ---------- Только сайт ----------
   Имена, которых нет в мини-аппе: страницы заказа, кабинета и
   юридические тексты. Лежат здесь, а не в base.html, чтобы значение
   цвета было объявлено ровно в одном файле на весь проект. */
--bg-2:#0c0e11;
--dim:#666e79;

--accent-ink:#08090b;
--accent-soft:rgba(255,255,255,.09);
--accent-line:rgba(255,255,255,.30);
--silver:linear-gradient(100deg,#ffffff 0%,#c9ced6 55%,#ffffff 100%);

--warn-soft:rgba(255,187,61,.10);

--shadow:0 14px 40px -18px rgba(0,0,0,.85);
--shadow-lg:0 30px 70px -24px rgba(0,0,0,.95);
--input-bg:rgba(255,255,255,.035);
--btn-cast:0 10px 28px -12px rgba(0,0,0,.85);
/* Старое имя цвета текста на кнопке. В общем слое он зовётся
   --btn-text; здесь оставлена связка, чтобы страницы, написанные
   раньше, не пришлось переписывать ради одной буквы. */
--btn-ink:var(--btn-text);
--img-invert:1;
}
:root[data-theme="light"]{
  --bg:#f2f2ef;
  --glass:rgba(255,255,255,.75);
  --glass-hi:rgba(255,255,255,.92);
  --glass-edge:rgba(255,255,255,.9);
  --glass-top:rgba(255,255,255,1);

  --card:rgba(255,255,255,.75);
  /* Карточка в светлой теме почти белая, и стеклянная заливка на ней
     исчезает: плашки цен и «Переименовать» читались как текст без
     кнопки. Здесь подложка серая, а кромка тёмная - только так плашка
     видна на белом. */
  --chip:rgba(8,9,11,.06);
  --chip-edge:rgba(8,9,11,.48);
  --chip-line:rgba(8,9,11,.48);
  --text:#08090b;
  --muted:#565d67;
  --line:rgba(8,9,11,.16);
  --line-soft:rgba(8,9,11,.07);
  --line-strong:rgba(8,9,11,.30);

  --btn-bg:linear-gradient(180deg,rgba(8,9,11,.93),rgba(8,9,11,.78));
  --btn-bg-hi:linear-gradient(180deg,rgba(8,9,11,1),rgba(8,9,11,.86));
  --btn-border:rgba(8,9,11,.5);
  --btn-text:#ffffff;
  --btn-hi:rgba(255,255,255,.34);
  --btn-lo:rgba(0,0,0,.3);

  --accent:#08090b;
  --live:#12a150;
  --warn:#a97400;
  --danger:#d22b1f;
  /* На светлом фоне широкое свечение читается грязью, а не светом:
     собираем его теснее и чуть приглушаем. */
  --glow-blur:20px; --glow-k:.8;
  --danger-soft:rgba(210,43,31,.09);
  --danger-soft-hi:rgba(210,43,31,.15);
  --danger-edge:rgba(210,43,31,.30);
  --link:#08090b;

  --tint:rgba(8,9,11,.07);
  --tint-warn:rgba(169,116,0,.12);
  --tint-off:rgba(89,96,106,.12);
  --rim:linear-gradient(145deg,
          rgba(255,255,255,1) 0%, rgba(255,255,255,.55) 26%,
          rgba(8,9,11,.07) 52%, rgba(255,255,255,.45) 74%,
          rgba(255,255,255,.95) 100%);
  --refract:blur(24px) saturate(170%) brightness(1.02);
  --spec:rgba(255,255,255,.65);

  --carbon:rgba(8,9,11,.018);
  --halo:rgba(8,9,11,.05);

--pane-bg:rgba(255,255,255,.58);
--pane-edge:rgba(255,255,255,.9);
--pane-hi:rgba(255,255,255,1);
--pane-shade:rgba(8,9,11,.22);

--bg-2:#ffffff;
--dim:#878e98;

--accent-ink:#ffffff;
--accent-soft:rgba(8,9,11,.06);
--accent-line:rgba(8,9,11,.24);
--silver:linear-gradient(100deg,#1a1c20 0%,#3a3f47 55%,#1a1c20 100%);

--warn-soft:rgba(169,116,0,.09);

--shadow:0 14px 34px -20px rgba(8,9,11,.28);
--shadow-lg:0 28px 60px -26px rgba(8,9,11,.32);
--input-bg:#ffffff;
--btn-cast:0 10px 26px -14px rgba(8,9,11,.6);
--img-invert:0;
}