/* Общая система оформления продуктов Артёма. Единственный источник правды.
 *
 * Тема одна — тёмная. Светлой версии нет намеренно (решение владельца
 * 2026-08-28): два набора значений расходятся при первой же правке, и
 * половина проверок контраста делается вслепую.
 *
 * Как подключать: файл копируется в проект при выкатке (`assets/ds.css`),
 * а не тянется с чужого домена — у Telegram Mini App жёсткий CSP, да и
 * лишняя сетевая зависимость лендингу не нужна. Версия ниже сверяется
 * с этим репозиторием.
 *
 * Версия: 1.1.0 (2026-08-28)
 *
 * Как это уживается со сборкой. Значения живут здесь, но два потребителя
 * обязаны их продублировать, и это осознанно:
 *   — конфиг Tailwind (лендинги) требует литералы, var() в нём не работает;
 *   — Mini App грузится под жёстким CSP и ради одного запроса держит стили
 *     одним файлом.
 * Поэтому оба ПОДКЛЮЧАЮТ этот файл первым и переопределяют у себя только то,
 * что отличается осознанно — с комментарием, почему. Расхождение без
 * комментария считать ошибкой.
 *
 * Контраст проверен расчётом, не на глаз. Все текстовые токены дают
 * >= 4.5:1 и на --bg, и на --surface:
 *   text 16.3 · hint 7.2 · accent 5.8 · pos 8.3 · neg 5.9 · warn 8.4
 * Границы — не текст: --border это разделитель (1.4:1, и этого достаточно),
 * а у интерактивных элементов граница --border-strong (3.2:1 на фоне,
 * порог для нетекстовых элементов по WCAG 1.4.11).
 */

:root {
  color-scheme: dark;

  /* ── Поверхности ──────────────────────────────────────────────────────
   * Не чистый чёрный: тёплый почти-чёрный. На OLED чистый #000 даёт
   * ореол вокруг светлого текста, а тёплая примесь сохраняет родство
   * со «бумажной» палитрой, из которой продукты выросли. */
  --bg: #121110;
  --surface: #1B1A18;
  --surface-2: #252320;
  --border: #33302B;
  --border-strong: #6B645B;

  /* ── Текст ──────────────────────────────────────────────────────────── */
  --text: #F2EEE7;
  --hint: #A79F95;

  /* ── Акцент продукта ─────────────────────────────────────────────────
   * Единственный токен, который проект переопределяет у себя. Всё
   * остальное общее — отсюда «одна семья, разные лица».
   *   Reytingo  #F0603F (киноварь лендинга, поднятая до 5.8:1 на тёмном)
   *   tapnika   #FF7A33
   *   Suflio    #E8E4DC (монохром: акцент почти белый, по духу продукта)
   *   Grill     #F5C518 */
  --accent: #F0603F;
  --accent-press: #D85436;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);

  /* ── Состояния ──────────────────────────────────────────────────────── */
  --pos: #5FBE8C;
  --neg: #E8695F;
  --warn: #D9A441;

  /* ── Каналы (для дашбордов) ─────────────────────────────────────────── */
  --tg: #4E9FE0;
  --yt: #E06663;
  --vk: #8B7FE8;

  /* ── Типографика ─────────────────────────────────────────────────────
   * Onest — один шрифт на всё, самохостинг (у Mini App CSP не пускает
   * внешние шрифты, а лендингу лишний домен не нужен). Из запрещённого
   * реестра ничего: ни Inter, ни Geist, ни Grotesk.
   * Цифры — табличные: в дашборде колонка чисел не должна плясать. */
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Заголовочная антиква — только на маркетинговых страницах: она даёт
     лендингу голос, которого не даст один гротеск. В дашборде не нужна:
     там всё держится на плотности и числах, а не на подаче. */
  --font-display: 'Playfair Display', Georgia, serif;
  --fs-hero: 1.35rem;
  --fs-lead: 0.95rem;
  --fs-body: 0.88rem;
  --fs-meta: 0.78rem;
  --fs-label: 0.7rem;

  /* ── Ритм и форма ────────────────────────────────────────────────────
   * Скругление умеренное и одно на всё: «мягкие скругления везде» —
   * запрещённый приём, но прямые углы на тёмном читаются жёстко. */
  --radius: 12px;
  --radius-sm: 8px;
  /* Крупное скругление для мобильных поверхностей: в Telegram Mini App
     карточки нативно скруглены сильнее, чем на вебе. */
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Тени на тёмном не работают — разделяем плоскости светом границы,
   * а не «тенью под всем подряд». */
  --shadow: none;
}

/* ── База ──────────────────────────────────────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Видимый фокус обязателен: на тёмном системное кольцо теряется. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Пользователь мог попросить систему не анимировать — уважаем. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}