/*
 * Токены интерфейса СТУДИИ.
 *
 * Это не дизайн-политика сайта клиента и никогда ею не станет: у сайта своя
 * шкала, свои гарнитуры и свой акцент, они живут в документе и считаются
 * резолвером. Здесь — только оформление инструмента.
 *
 * ## Откуда взят язык
 *
 * Из своего же AI-сервиса (`platform/AI`): почти монохром, чёрный фон, белое
 * перо, серые ступени поверхностей и РОВНО ОДИН хроматический сигнал —
 * красный на необратимое. Главная кнопка не акцентная, а инверсная: белое
 * на чёрном. Это работает рядом с холстом лучше любой палитры с акцентом:
 * инструмент без собственного цвета не спорит с чужим дизайном на листе,
 * и человек не ищет, откуда взялся синий, в собственной панели.
 *
 * Отступление от источника ровно одно и оно намеренное — синяя точка
 * владения (инвариант 3). Монохром не может обозначить «это значение
 * принадлежит человеку» ничем, кроме цвета: белым она сольётся с текстом,
 * серым — с приглушённым. Хроматический сигнал здесь несёт смысл, которого
 * больше нести нечем, поэтому он остаётся.
 *
 * Светлая и тёмная — одним объявлением через `light-dark()`. Записать
 * палитру трижды (свет, `prefers-color-scheme`, явный атрибут) означает
 * три места, где она разъезжается: первый же новый токен доедет до двух
 * из трёх, и разница вылезет через месяц у одного человека из десяти.
 * Явное переключение остаётся: оно меняет `color-scheme`, а не палитру.
 *
 * По умолчанию инструмент тёмный — как источник. «Системная» остаётся
 * честной третьей опцией и продолжает значить систему; меняется не она,
 * а то, с чего начинает человек, ничего не выбравший.
 */

:root {
  color-scheme: light dark;

  /* ── гарнитуры ──────────────────────────────────────────────────────
   * Сетевых шрифтов нет: правило репозитория запрещает любые сетевые
   * зависимости во время выполнения. Onest стоит первой на случай, если
   * она установлена в системе (макеты нарисованы ею), дальше — системная.
   */
  --vst-font: 'Onest', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --vst-font-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* ── размеры текста ────────────────────────────────────────────────
   * Тело интерфейса 14 px — как в источнике. Прежние 13 брались ради
   * плотности дерева, но плотность там держится высотой строки, а не
   * кеглем: 14 px в строке 28 px даёт те же тридцать строк на 900 px
   * и читается без прищура.
   *
   * Заголовки повторяют главный экран источника: 36 крупный, 24 средний.
   */
  --vst-text-xs: 11px;
  --vst-text-s: 12px;
  --vst-text: 14px;
  --vst-text-m: 16px;
  --vst-text-l: 18px;
  --vst-text-xl: 24px;
  --vst-text-hero: 36px;

  --vst-leading-tight: 1.15;
  --vst-leading: 1.45;
  --vst-leading-loose: 1.6;

  --vst-weight: 400;
  --vst-weight-medium: 500;
  --vst-weight-bold: 600;

  /* ── ритм ──────────────────────────────────────────────────────────
   * Шкала кратна 4. Размеры каркаса (полосы, рельс, панели) сюда не входят:
   * они живут в layout.ts и приезжают переменными --vst-lay-*.
   */
  --vst-gap-1: 4px;
  --vst-gap-2: 8px;
  --vst-gap-3: 12px;
  --vst-gap-4: 16px;
  --vst-gap-5: 24px;
  --vst-gap-6: 32px;
  --vst-gap-7: 40px;
  --vst-gap-8: 48px;

  /* Радиусы источника: 8 у контролов, 12 у панелей, 16 у поля-композитора. */
  --vst-radius-s: 6px;
  --vst-radius: 8px;
  --vst-radius-l: 12px;
  --vst-radius-xl: 16px;
  --vst-radius-pill: 999px;

  /* ── поверхности ───────────────────────────────────────────────────
   * Три уровня и не больше: фон приложения, панель, вложенная плашка.
   * Четвёртый уровень на тёмной теме различим только на хорошем мониторе,
   * то есть на половине машин его нет.
   *
   * Чёрный фон здесь настоящий `#000`, а не «почти чёрный»: на OLED он
   * даёт тот самый провал, из-за которого панель с `#0a0a0a` читается
   * как отдельный предмет без единой тени.
   */
  --vst-bg: light-dark(#ffffff, #000000);
  --vst-surface: light-dark(#f5f5f5, #0a0a0a);
  --vst-surface-2: light-dark(#ebebeb, #171717);
  --vst-top: light-dark(#ffffff, #000000);

  --vst-line: light-dark(#e5e5e5, #262626);
  --vst-line-quiet: light-dark(#f0f0f0, #1a1a1a);
  --vst-line-strong: light-dark(#d4d4d4, #3f3f46);

  /* ── текст ─────────────────────────────────────────────────────────
   * Три ступени, и каждая следующая тише предыдущей ЗАМЕТНО: две ступени
   * в один тон уже случались (`fgMuted` совпал с `fg`), и на экране это
   * выглядит не как приглушение, а как сломанная тема.
   *
   * `fg-3` держит 4.5:1 к фону приложения на обеих темах — приглушённое
   * не значит нечитаемое, а именно им подписаны источники находок и время,
   * то есть то, ради чего в ленту и смотрят.
   */
  --vst-fg: light-dark(#171717, #ffffff);
  --vst-fg-2: light-dark(#595959, #d4d4d4);
  --vst-fg-3: light-dark(#737373, #a1a1a1);

  /* ── акцент ────────────────────────────────────────────────────────
   * В источнике акцента НЕТ: главным цветом работает само перо — белое
   * на тёмной теме, почти чёрное на светлой. Выделение, ссылка и фокус
   * обозначаются им, а фон выделения — приглушённой поверхностью.
   *
   * Это не отказ от акцента ради моды. Инструмент стоит вплотную к холсту
   * с чужим дизайном, и собственный хроматический акцент там читается как
   * часть этого дизайна.
   */
  --vst-accent: light-dark(#171717, #fafafa);
  --vst-accent-hover: light-dark(#000000, #ffffff);
  --vst-accent-quiet: light-dark(#ebebeb, #1f1f1f);

  /* ── состояния ─────────────────────────────────────────────────────
   * Цветом обозначается состояние, а не «красиво». В монохроме это
   * работает сильнее обычного: три цветных пятна на весь экран нельзя
   * не заметить, и потому их ровно три.
   */
  --vst-ok: light-dark(#15803d, #4ade80);
  --vst-warn: light-dark(#a16207, #fbbf24);
  --vst-warn-bg: light-dark(#fffbeb, #1f1a0a);
  --vst-warn-line: light-dark(#fde68a, #4a3a10);
  /* Красный источника как есть; на чёрном взят на ступень светлее —
   * `#dc2626` на `#000` даёт 4.0:1 и перестаёт быть читаемым текстом. */
  --vst-danger: light-dark(#dc2626, #ef4444);

  /* Синяя точка владения — единственное хроматическое отступление.
   * Обоснование в шапке файла: белым и серым этот смысл не выражается. */
  --vst-dot: light-dark(#2563eb, #60a5fa);

  /* Главная кнопка — инверсия фона: белое на чёрном, чёрное на белом.
   * Ровно как `--color-primary` источника. */
  --vst-primary-bg: light-dark(#000000, #ffffff);
  --vst-primary-fg: light-dark(#ffffff, #000000);

  /* ── фокус ─────────────────────────────────────────────────────────
   * Кольцо снаружи элемента, а не рамка внутри: рамка внутри меняет размер
   * контрола на фокусе, и строка контролов дёргается при обходе табом.
   *
   * Взято перо, а не `--color-ring` источника: `#3f3f46` на чёрном — это
   * 2.3:1, то есть кольцо, которого при беглом взгляде нет. Кольцо фокуса
   * существует ровно для тех, кто ходит клавиатурой, и невидимое кольцо
   * не выполняет единственной своей работы.
   */
  --vst-focus: light-dark(#171717, #ffffff);
  --vst-focus-width: 2px;

  /* ── глубина ───────────────────────────────────────────────────────
   * В источнике теней нет вовсе: предметы разделены границей и ступенью
   * поверхности. Тень остаётся у двух вещей, которые физически висят над
   * страницей, — у листа на холсте и у всплывашки.
   */
  /* Подложка, на которой лежит лист сайта.
   *
   * Отдельная роль, а не фон приложения. На тёмной теме это одно и то же —
   * чёрное поле, из которого белая страница выступает сама. На светлой
   * совпадение фатально: страница сайта белая, хром почти белый, и граница
   * между «вот сайт» и «вот инструмент» пропадает вовсе. Подложка обязана
   * быть ТЕМНЕЕ листа на обеих темах, иначе лист не читается предметом. */
  --vst-canvas-well: light-dark(#e4e4e4, #000000);
  --vst-canvas-edge: 0 0 0 1px light-dark(#cfcfcf, #262626);
  --vst-shadow-pop: 0 8px 24px light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 60%));

  --vst-z-popover: 60;
  --vst-z-note: 70;

  /* ── движение ──────────────────────────────────────────────────────
   * Кривая и длительность источника: 150 мс, `cubic-bezier(.4, 0, .2, 1)`.
   * Анимация работает на понимание, а не на впечатление: показать, что
   * всплывашка вышла из кнопки, и что полоса прогресса живая.
   */
  --vst-motion-fast: 100ms;
  --vst-motion: 150ms;
  --vst-ease: cubic-bezier(.4, 0, .2, 1);
}

/*
 * Явный выбор темы. Меняется одна строка — схема; палитра остаётся там же,
 * где была, и `light-dark()` пересчитывает её сам.
 */
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }

@media (prefers-reduced-motion: reduce) {
  :root { --vst-motion-fast: 0ms; --vst-motion: 0ms; }
}