/* ============================================================================
   СУПРЕМУМ · sup-compat.css — мост от старых имён к новым токенам
   ============================================================================
   Требует sup-tokens.css. Подключается СРАЗУ ПОСЛЕ него и ПЕРЕД
   theory.css / practice.css / exam.css / app-shell.css / supremum.css.

   ЗАЧЕМ. На сайте 512 страниц теории, 56 страниц практики и 4 экзаменационных.
   В их разметке и во встроенных стилях зашиты старые имена переменных:
   --glass-bg, --glass-border, --muted, --c-blue, --shadow-md и ещё 64 штуки.
   Переписать их означало бы править 572 файла. Этот файл переводит все старые
   имена на новые токены, поэтому страницы получают новое оформление
   БЕЗ ЕДИНОЙ ПРАВКИ РАЗМЕТКИ.

   Файл переходный. Порядок вывода из работы описан в плане (фаза 8): по мере
   того как раздел переводится на новые имена, соответствующие строки отсюда
   удаляются. Пустой файл = миграция закончена.

   ВАЖНО ПРО ПОРЯДОК. У страниц теории встроенный <style> идёт ПОСЛЕ ссылки
   на CSS и перебивает его. Если на странице остался свой --accent или свой
   фон body, он победит этот мост. Такие остатки ищет
   tools\design_system\audit_inline.py — он же считает, сколько их осталось.
   ============================================================================ */

/* СПЕЦИФИЧНОСТЬ. Блок намеренно html:root, а не голый :root. Слой токенов
   (sup-tokens-paper.css) выровнен на (0,1,1) во всех шести сочетаниях
   тональность × тема — иначе базовая тональность проигрывала палитре v1
   в supremum.css (html[data-theme="dark"], тоже (0,1,1)). Мост обязан
   оставаться ПОСЛЕДНИМ словом для старых имён: три из них — --glass,
   --glass-strong, --glass-border — он намеренно переводит на плотные
   поверхности. При голом :root (0,1,0) мост проигрывал бы токенам, и
   полупрозрачность вернулась бы под учебный текст. */
html:root {
  /* ── Подложки и поверхности ──────────────────────────────────────────────
     Раньше это было «стекло»: полупрозрачный белый плюс backdrop-filter.
     Стало непрозрачной поверхностью. Полупрозрачность убрана сознательно:
     на ней невозможно гарантировать контраст текста — он зависит от того,
     что оказалось под ней, и WCAG-замер на стекле нарушался легче всего. */
  --bg-base: var(--bg);
  --glass: var(--surface);
  --glass-bg: var(--surface);
  --glass-strong: var(--surface);
  --card: var(--surface);
  --tile-bg: var(--n-2);
  --viz-bg: var(--surface);
  --open-pt-fill: var(--surface);
  --ui-surface: var(--surface);
  --ui-surface-strong: var(--n-2);
  --ui-track: var(--n-3);

  /* ── Границы и линии ── */
  --glass-border: var(--border);
  --ui-border: var(--border);

  /* ── ЧЕРТЁЖНАЯ ПУНКТИРНАЯ ЛИНИЯ ≠ ВОЛОСЯНАЯ ЛИНЕЙКА ──────────────────────
     Здесь стояло --c-dashed: var(--rule), и это была подмена роли. --rule —
     разделительная линейка вёрстки, ей положено быть еле заметной; --c-dashed
     на 289 страницах рисует вспомогательное построение — и не только штрихом:
     264 страницы берут её из JS и красят ею ПОДПИСЬ («a», «D»), то есть текст.
     Замер на «сумме углов треугольника»: подпись «a» к холсту 2.00 → 1.57
     в светлой теме и 2.25 → 1.67 в тёмной при пороге 4.5. Единственное место,
     где перевод сделал читаемость хуже, чем была.

     Ведём на --text-soft — роль «текст второго плана», у которой генератор
     палитры проверяет ≥ 4.5 на каждой подложке во всех шести сочетаниях
     тональность × тема (tools\design_system\palette.py, check_paper, п. 1).
     Стало 5.63…6.67. Она нейтральная — вспомогательная линия остаётся
     подчинённой, ровно как исходный #94a3b8, а не превращается во второй
     чернильный объект.

     Почему не --fig-1: контраст был бы 15.8, но fig-1 — это те же чернила,
     что и --c-base, которым нарисована сама фигура (расстояние 0.000), то есть
     построение слилось бы с построенным на КАЖДОЙ странице. Остаток: до
     --fig-5 нейтраль отходит на 0.051…0.077 при пороге различимости линий
     0.075 — принято, потому что пунктир отличается от сплошной штрихом,
     а не только цветом. */
  --c-dashed: var(--text-soft);

  /* ── Текст ── */
  --muted: var(--text-soft);
  --gray: var(--text-soft);
  --c-base: var(--text);
  --text-lh: var(--lh-md);

  /* ── Градиентные пятна на body: ВЫКЛЮЧЕНЫ ────────────────────────────────
     Три радиальных градиента pink/blue/purple лежали на body и в theory.css,
     и в supremum.css. Это самый узнаваемый штамп ИИ-вёрстки, и на странице
     теории они были почти вдвое насыщеннее, чем в хабе (.55 против .28) —
     то есть половины сайта расходились даже по фону. Правила, рисующие
     их, никуда не делись, но красить им теперь нечем: прозрачное.
     Взамен фактура из мира предмета — клетка, см. sup-base.css. */
  --glow-1: transparent;
  --glow-2: transparent;
  --glow-3: transparent;
  --glow1: transparent;
  --glow2: transparent;
  --glow3: transparent;

  /* ── Тени ────────────────────────────────────────────────────────────────
     Было три ступени в theory.css плюс одна безымянная --shadow в остальных
     файлах. Сведены к возвышению из токенов: сначала граница, тень только
     у того, что действительно висит над страницей. */
  --shadow: var(--shadow-raised);
  --shadow-sm: var(--shadow-raised);
  --shadow-md: var(--shadow-float);
  --shadow-lg: var(--shadow-modal);
  --glass-shadow: var(--shadow-float);
  --ui-shadow: var(--shadow-raised);
  --ui-shadow-lift: var(--shadow-float);

  /* ── Радиусы ─────────────────────────────────────────────────────────────
     Было 14 разных значений в practice.css, 12 в exam.css, 11 в app-shell.css
     и 22px литералом в supremum.css. Стало шесть ступеней из токенов. */
  --ui-radius: var(--radius-md);
  --ui-radius-card: var(--radius-lg);
  --radius-md-sb: var(--radius-md);
  --radius-lg-sb: var(--radius-lg);

  /* ── Движение и фокус ── */
  --ui-ease: var(--ease-out);
  --ease-out-sb: var(--ease-out);
  --ui-ring: var(--ring);
  --shadow-sm-sb: var(--shadow-raised);

  /* ── Раскладка ── */
  --hdr: 64px;
  --sbw: 260px;      /* ширина сайдбара оболочки */

  /* ── Смысловые цвета под старыми именами ─────────────────────────────────
     Здесь ничего не «переименовано ради красоты»: старые имена --green/--red/
     --amber/--blue означали ровно роли «верно / ошибка / внимание / факт»
     и теперь ведут на смысловые токены. */
  --green: var(--ok);
  --red: var(--err);
  --amber: var(--warn);
  --blue: var(--info);

  --def-bg: var(--ok-soft);
  --def-border: var(--ok);
  --exmp-bg: var(--info-soft);
  --exmp-border: var(--info);
  --memo-bg: var(--warn-soft);
  --memo-border: var(--warn);
  --mist-bg: var(--err-soft);
  --mist-border: var(--err);
  --mistake-bg: var(--err-soft);
  --mistake-border: var(--err);

  /* Мягкие подложки-«дымки» из старой системы */
  --f-green: var(--ok-soft);
  --f-red: var(--err-soft);
  --f-orange: var(--warn-soft);
  --f-blue: var(--info-soft);
  --f-purple: var(--accent-soft);

  /* ── ПАЛИТРА ЧЕРТЕЖА ─────────────────────────────────────────────────────
     Это НЕ смысловые цвета. Ими раскрашивают разные объекты одного чертежа:
     прямая a синяя, прямая b фиолетовая, дуга угла оранжевая. Задача здесь
     другая — чтобы линии отличались ДРУГ ОТ ДРУГА, а не от «ошибки».

     Сами значения --fig-* живут в sup-tokens.css: это НОВЫЕ имена, часть
     системы, а не совместимость. Здесь только перевод старых имён на них.

     Осторожно: на старых страницах дуги углов рисуются --c-red, и на чертеже
     это читается как «здесь ошибка», хотя значит «вот этот угол». Поэтому
     --c-red ведёт НЕ на смысловой красный, а на винный --fig-6: тёплый
     и заметный, но не кричащий «неверно».

     Свести --c-red и --c-orange в один цвет нельзя: 180 страниц из 516
     используют их ОДНОВРЕМЕННО, то есть различают этим два разных угла
     на одном чертеже. Проверено перебором по всем материалам.

     ── ПОЧЕМУ ИМЯ ВСЁ-ТАКИ ВАЖНО (пересмотрено 21.08.2026) ────────────────
     Сначала имена считались неважными: раз цвета лишь отличают объекты друг
     от друга, любая перестановка годится. Перебор по материалам это опроверг:
     99 страниц теории из 511 называют цвет СЛОВАМИ в тексте — «перетаскивай
     оранжевые точки», «потяни за вершину синего треугольника», «площади
     синего и зелёного квадратов». Всего 247 упоминаний. При прежней
     перестановке синий уезжал в чернила, а оранжевый в лиловый, и текст
     переставал описывать то, что ученик видит.

     Различимость от перестановки не страдает: все шесть --fig-* уже
     проверены генератором палитры на различимость, в том числе при
     дальтонизме. Поэтому имена сопоставлены по смыслу.

     Исключение — --c-teal: седьмого цвета в палитре нет, а бирюзовый
     встречается на 3 страницах и ни разу не назван словом в тексте
     (проверено). Он и уступает чернила, оставаясь отличимым от синего
     и зелёного, с которыми делит чертёж. */
  --c-blue: var(--fig-2);     /* синевато-серый  */
  --c-green: var(--fig-3);    /* зелёный         */
  --c-orange: var(--fig-4);   /* охра, тёплый    */
  --c-purple: var(--fig-5);   /* лиловый         */
  --c-red: var(--fig-6);      /* терракота       */
  --c-teal: var(--fig-1);     /* чернила, см. исключение выше */

  /* Акцент главы в практике: по умолчанию чернила. Разделы, где у главы свой
     оттенок, переопределяют эту переменную у себя — она для этого и заведена. */
  --chapter-accent: var(--accent);
}

/* ── ЧТО МОСТ ПОЧИНИТЬ НЕ МОЖЕТ ────────────────────────────────────────────
   Переменную он подменяет, а захардкоженное значение — нет. По переписи
   (tools\design_audit\token_census.py) литеральных цветов вне блоков токенов:
   practice.css — 57, exam.css — 40, theory.css — 24, app-shell.css — 19,
   supremum.css — 16. Их правят в самих файлах, раздел за разделом, и это
   и есть содержание задач 8.5–8.8 плана.

   Три места видны сразу и правятся первыми, потому что бьют по всем страницам:
   · body { font-family: 'Segoe UI', system-ui } в theory.css и
     -apple-system в supremum.css — шрифт мимо системы, страница выглядит
     по-разному на Windows и на Mac;
   · backdrop-filter: blur(...) на шапке, карточках и коробке интерактива;
   · transform: translateY(-2px) на наведении у кнопок, карточек и разделов.
   ──────────────────────────────────────────────────────────────────────── */