/* brand.css — ЕДИНЫЙ слой фирстиля для страниц, которые видит клиент.
   Подключается всеми серверными страницами: витрина плана, рабочий вид плана,
   отчёт таргета и его превью, дашборд клиента, админка.

   ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ КОПИЯ ТОКЕНОВ В КАЖДОЙ СТРАНИЦЕ.
   Копии уже разошлись, и это измеримо: на шести поверхностях было шесть палитр,
   причём расходились даже те, что задумывались одинаковыми — два «чёрных»
   (#0c0e12 и #0a0a0a) и два «лайма» (#c6f24e и #d8ff36). Пока значения лежат
   внутри страниц, следующая правка снова разведёт их, и заметит это только клиент.

   Cockpit (Mini App) сюда НЕ входит: у него свой слой frontend/src/v4/tokens.ts.
   Это осознанная граница, а не упущение — внутренний инструмент и клиентские
   страницы живут по разным правилам.

   Значения — из docker/site/assets/css/style.css, источник правды по фирстилю.
   Меняются только там и переносятся сюда; расхождение этих двух файлов
   означает, что сайт и клиентские страницы снова разъехались. */

/* Шрифты свои, не Google Fonts: страницы открывают с телефона по ссылке из
   мессенджера, и лишний обход к чужому домену задерживает первый экран.
   Пути АБСОЛЮТНЫЕ — файл подключают страницы разной вложенности
   (/plan/{slug}/preview и /target/{slug}), относительный путь у них разъедется. */
@font-face{font-family:Inter;src:url(/assets/fonts/inter-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-900.woff2) format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Bebas Neue';src:url(/assets/fonts/bebas-neue.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Bebas Neue';src:url(/assets/fonts/bebas-neue-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  /* Бумага и чернила — как на сайте. */
  --paper:#fff;
  --paper-muted:#f5f5f5;
  --ink:#0b0b0c;
  --ink-60:rgba(12,12,12,.6);
  --ink-40:rgba(12,12,12,.4);
  --line:rgba(12,12,12,.12);
  --night:#0b0b0c;

  --accent:#1b6df5;
  --accent-soft:#2bc3f5;
  --ink-deep:#123a7a;
  --ok:#1f9d55;

  --radius:14px;
  --gap:20px;
  --pad:24px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* ПОДЛОЖКА ПОД ВИЗУАЛ. На тёмном фоне креатив клиента держался сам собой;
     на бумаге светлая картинка сливается с листом и «висит в воздухе».
     Поэтому каждому кадру — приглушённая подложка и волосяная рамка:
     граница кадра должна быть видна до того, как картинка загрузится. */
  --mount:#f0f0f1;
  --mount-line:rgba(12,12,12,.14);

  /* Типы публикаций различаются ЦВЕТОМ ИЗ ПАЛИТРЫ САЙТА, а не произвольными
     метками. Третий оттенок взят из неё же (--ok), а не придуман: новый цвет
     ради одной точки снова запустил бы дрейф, с которого всё началось. */
  --kind-reels:#1b6df5;
  --kind-carousel:#2bc3f5;
  --kind-stories:#1f9d55;
  --kind-post:#123a7a;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:500 15px/1.5 Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  letter-spacing:-.02em;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img,video{max-width:100%}

/* Фирменная подача крупного числа: Bebas — только для цифр и имени клиента.
   В остальном одна гарнитура, как на сайте: вторая нужна там, где число само
   работает как изображение, и больше нигде. */
.b-display{font-family:'Bebas Neue',Inter,sans-serif;font-weight:400;letter-spacing:0;
  line-height:.9}

/* Видимый фокус с клавиатуры: страницу открывают и читалками, и с клавиатуры,
   а системное кольцо на бумаге почти не видно. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}