/* ═══════════════════════════════════════════════════════════════════════════
   KAERIS · шкала интерфейса

   ЭТОТ ФАЙЛ ОТДАЁТСЯ БРАУЗЕРУ. Он лежит в frontend/, а не в launch/design-system/,
   намеренно: сторож `test_design_scale_is_held.py` читает разрешённые значения
   ровно из того файла, который грузит страница. Копия «для дизайна» рядом с
   копией «для прода» расходятся за месяц — и тогда сторож стережёт не то.
   Двенадцать ступеней, посчитанные в OKLCH — перцептивно ровный шаг, а не
   подбор на глаз. Роль каждой ступени закреплена: вопрос «какой оттенок взять
   для этой рамки» больше не задаётся, есть роль — есть номер.
   Соглашение о ролях — как в Radix Colors (MIT). Значения свои.

   1  фон приложения        5  нажатие             9  сплошная заливка
   2  фон подложки          6  тонкий разделитель  10 её наведение
   3  фон элемента          7  рамка элемента      11 текст приглушённый
   4  наведение             8  сильная рамка·фокус 12 текст основной

   ПРАВИЛО ЦВЕТА: интерфейс серый. Акцент («кость глубже») появляется только
   там, где несёт смысл: главное действие, выбранное состояние, фокус.
   Иерархию держат размер и контраст, а не цвет.

   Нейтральный — угольный: цветность 0.005, тон уведён в холод. Выбран 16.08
   вместе с акцентом: подбирать их порознь нельзя, иначе фон и акцент спорят
   (тёплый графит был подобран под терракоту и на большом поле читался коричневым).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --n-1: #111113;
  --n-2: #18191a;
  --n-3: #222324;
  --n-4: #2a2a2c;
  --n-5: #303132;
  --n-6: #39393b;
  --n-7: #464648;
  --n-8: #5b5b5d;
  --n-9: #6b6b6c;
  --n-10: #777778;
  --n-11: #b2b3b4;
  --n-12: #edeeef;

  --a-1: #2a2723;
  --a-2: #37332c;
  --a-3: #4a4337;
  --a-4: #5c5342;
  --a-5: #6d614d;
  --a-6: #82755c;
  --a-7: #9f8f72;
  --a-8: #c5b18f;
  --a-9: #d9c196;
  --a-10: #edd6ac;
  --a-11: #fff4e0;
  --a-12: #faf4ea;

  /* Подпись на акцентной заливке — ТЁМНАЯ. Акцент светлый (кость), белый текст
     на нём даёт 1.4 при норме 4.5; угольный даёт 10.79. Отдельный токен, а не
     «возьми --n-1 руками»: роль названа, значит её не перепутают со фоном. */
  --on-a: #111113;

  --ok-1: #0c130d;
  --ok-2: #101d12;
  --ok-3: #142817;
  --ok-4: #15311a;
  --ok-5: #163a1d;
  --ok-6: #174421;
  --ok-7: #1d5329;
  --ok-8: #2b6b38;
  --ok-9: #337e42;
  --ok-10: #428a50;
  --ok-11: #89c491;
  --ok-12: #ddf6df;

  --warn-1: #161007;
  --warn-2: #211708;
  --warn-3: #2f1f04;
  --warn-4: #3b2500;
  --warn-5: #452b00;
  --warn-6: #513200;
  --warn-7: #633d00;
  --warn-8: #7e5100;
  --warn-9: #946000;
  --warn-10: #a06d00;
  --warn-11: #d8ab62;
  --warn-12: #feebcf;

  --bad-1: #190e0d;
  --bad-2: #261312;
  --bad-3: #381817;
  --bad-4: #461a1a;
  --bad-5: #531c1d;
  --bad-6: #612022;
  --bad-7: #76282a;
  --bad-8: #95383a;
  --bad-9: #af4345;
  --bad-10: #bc5152;
  --bad-11: #f29693;
  --bad-12: #ffe3e1;

  /* Отступы — десять значений. Одиннадцатого не существует.
     Начинали с восьми (4…64). Сторож сразу показал, что этого мало: плашка
     высотой 28px не может иметь внутренний отступ 12px, а точка статуса не
     отодвигается на 8. Плотному интерфейсу нужны 2 и 6 — они добавлены
     осознанно, а не потому, что «не хватило». Всё остальное режется. */
  --s-0: 2px;  --s-1: 4px;  --s-2: 6px;  --s-3: 8px;  --s-4: 12px;
  --s-5: 16px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px;

  /* Радиусы — пять. Пятый не выбран, а ВЫЧИСЛЕН: внутренний угол под корпусом
     обязан равняться внешнему минус рамка минус отступ (12 − 1 − 6 = 5). Взять
     ближайший из четырёх нельзя — из-под рамки полезут уголки, ровно это и было
     видно на первой сборке корпуса 16.08. Роль есть — значит, значение законно. */
  --r-1: 4px; --r-2: 8px; --r-3: 12px;
  /* 9999px, а не 999px, — и это не вкус. Утилита Tailwind `rounded-full`
     даёт ровно 9999px, и она стоит на тридцати ещё не переведённых
     страницах. Возьми шкала своё число — и на каждой такой странице
     появился бы ВТОРОЙ радиус «таблетки» рядом с существующим: шкала
     чинила бы одну поверхность и портила тридцать. Рисуется одинаково. */
  --r-full: 9999px;
  --r-inner: 5px;

  /* Шрифт — восемь ступеней. 11px добавлен для микроподписей (ключ строки,
     счётчик, единицы): 12px для них крупноват и съедает плотность. Ниже 11
     не опускаемся — читаемость важнее плотности. */
  --t-0: 11px; --t-1: 12px; --t-2: 13px; --t-3: 15px; --t-4: 17px;
  --t-5: 21px; --t-6: 28px; --t-7: 40px;

  /* Межстрочный — правило, а не число. */
  --lh-tight: 1.2;   /* заголовки */
  --lh-base: 1.5;    /* интерфейс */
  --lh-long: 1.65;   /* абзацы текста */

  /* Тени — ровно три, и у каждой названа роль. Четвёртой не существует.
     Замер лендинга 16.08 дал ДЕВЯТНАДЦАТЬ теней при трёх работающих ролях:
     семнадцать из них встречались один-два раза — то есть каждая была
     придумана в момент написания. Свечения (цветной halo вокруг точки,
     кнопки, значка) в список НЕ входят намеренно: подсветка — это фактура,
     а фактура живёт только на корпусе и больше нигде. */
  --sh-1: 0 1px 2px rgba(0,0,0,.5);          /* приподнятая мелочь: чип, точка */
  --sh-2: 0 8px 24px -14px rgba(0,0,0,.75);  /* панель, всплывающее окно      */
  --sh-3: 0 24px 54px -26px rgba(0,0,0,.9);  /* корпус — ровно один на экран  */

  /* Плотная таблица. */
  --row-h: 34px;

  /* Рамка фокуса. Нейтральный-8 давал 2.79 к фону при норме 3.0 — человек,
     идущий по интерфейсу с клавиатуры, не видел бы, где он находится.
     Акцент-10 даёт 13.31 и при этом честен по правилу цвета: фокус — это
     состояние, а не украшение. */
  --focus: var(--a-10);
  --focus-ring: 0 0 0 2px var(--n-1), 0 0 0 4px var(--a-10);

  /* Движение. Одно значение на вход, одно на выход — выход быстрее. */
  --in: 180ms cubic-bezier(.2,.8,.3,1);
  --out: 120ms cubic-bezier(.4,0,.7,.2);
}

@media (prefers-reduced-motion: reduce) {
  :root { --in: 1ms; --out: 1ms; }
}