/* ============================================================================
* GRAPHITE — дизайн-система (единый источник правды)
* Извлечена из панелей и канваса граф-редактора PlotRox. Тёмная по определению.
*
* 🔴 ЭТО ЕДИНСТВЕННЫЙ ИСТОЧНИК. Потребители ПОДКЛЮЧАЮТ этот файл
* (`@import "…/Graphite/graphite.css"` или ), НЕ копируют токены.
* Правка этого файла автоматически меняет все места, где он используется.
*
* Неймспейс изолирован:
* · переменные — `--g-*` (редактор PlotRox использует `--gr-*` — НЕ пересекается)
* · классы — `.g-*` под корнем `.graphite`
* · бренд продукта (indigo #6466F1, Inter) — отдельная система, здесь ни при чём.
*
* Версия: см. VERSION. Меняешь оттенок — правишь ОДНО место (блок токенов ниже).
* ==========================================================================*/
/* ── ТОКЕНЫ ─────────────────────────────────────────────────────────────────
* Объявлены и на :root, и на .graphite: правила Graphite работают и в ПОРТАЛАХ
* (меню/окна рендерятся в , вне корня-обёртки) — иначе var() не резолвится
* и правило молча отваливается целиком (фон прозрачный, рамка светлая). */
:root,
.graphite {
/* Поверхности — глубина ТОНОМ, тень только для отрыва (меню/поповер) */
--g-canvas: #1c1c1c; /* @kind color */ /* дальний план, фон канваса */
--g-panel: #202020; /* @kind color */ /* доки, сайдбары, меню, поповеры */
--g-card: #242424; /* @kind color */ /* карточки, вложенные блоки */
--g-raised: #2a2a2a; /* @kind color */ /* поля, строки, ховер, вторичная подложка */
/* Текст — иерархия яркостью */
--g-ink: #e8e8e8; /* @kind color */
--g-dim: #9a9a9a; /* @kind color */
--g-faint: #6f6f6f; /* @kind color */
/* Границы — структура сильнее контура поля */
--g-line: #333333; /* @kind color */ /* рамки/разделители/оверлей */
--g-line-soft: #2b2b2b; /* @kind color */ /* контур поля в покое — тише */
--g-focus: rgba(37,99,235,.42); /* @kind color */ /* кольцо фокуса — не неон */
--g-dot: #3a3a3a; /* @kind color */ /* точки сетки канваса */
/* Акцент — только на активном */
--g-accent: #2563eb; /* @kind color */
--g-accent-hover:#2f6ef0; /* @kind color */
--g-accent-ink: #ffffff; /* @kind color */
/* Радиусы */
--g-r-xs: 4px; /* @kind radius */
--g-r-sm: 6px; /* @kind radius */
--g-r-md: 8px; /* @kind radius */
--g-r-lg: 12px; /* @kind radius */
/* Тени (для отрыва от плоскости) */
--g-shadow-pop: 0 2px 10px rgba(0,0,0,.35); /* @kind shadow */
--g-shadow-menu: 0 8px 24px rgba(0,0,0,.45); /* @kind shadow */
/* Метрика
🔴 КЕГЕЛЬ ОДИН. `--g-fs-ui` — единственный размер текста в системе (закон 8).
Токена «крупная метка» больше нет: он был объявлен как 13px, не применялся
нигде и противоречил реализации, где панель форсит 11px на всё. Иерархию
держат цвет, вес и размер иконки — не кегль. */
--g-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* @kind font */
--g-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* @kind font */
--g-fs-ui: 11px; /* @kind font */ /* тело UI — единственная ступень */
--g-fs-micro: 10px; /* @kind font */ /* ТОЛЬКО цифра в пилюле/бейдже, не для текста */
--g-row-h: 34px; /* @kind spacing */ /* высота строки «метка-значение» */
--g-label-w: 33.333%; /* @kind spacing *//* ширина колонки метки (две вертикали на панель) */
--g-gap: 8px; /* @kind spacing */ /* иконка → текст */
--g-pad: 12px; /* @kind spacing */ /* внутренний отступ панели по горизонтали */
/* Иконки — три роли, замер редактора (служебная / сущность / крупная) */
--g-icon-sm: 12px; /* @kind spacing */ /* шеврон, плюс, галочка */
--g-icon-md: 14px; /* @kind spacing */ /* иконка сущности: тип ноды, пункт рейки */
--g-icon-lg: 16px; /* @kind spacing */ /* действие в рейке, кнопка сворачивания */
/* Моторика — замер канона редактора (Tailwind transition-colors) */
--g-t: 150ms; /* @kind other */
--g-ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */
/* Плёнки состояний — ОДНИ на всю систему.
🔴 Строка свойства, узел дерева, пункт рейки и пункт меню обязаны
подсвечиваться одной и той же плёнкой: разные ховеры на соседних
поверхностях читаются как разные компоненты, хотя это один жест. */
--g-hover-film: rgba(255,255,255,.035); /* @kind color */
--g-active-film: rgba(255,255,255,.07); /* @kind color */ /* нажатие / раскрытая группа */
--g-select-film: rgba(37,99,235,.16); /* @kind color */ /* устойчивое «выбрано» */
/* Раскладка доков — числа связаны между собой (см. закон 9) */
--g-rail-w: 48px; /* @kind spacing */ /* рейка действий у края окна */
--g-rail-w-narrow: 40px; /* @kind spacing */ /* рейка-переключатель свёрнутого дока */
--g-rail-item: 28px; /* @kind spacing */ /* квадрат пункта рейки */
--g-rail-item-action: 24px; /* @kind spacing */ /* квадрат действия (плотнее пункта) */
--g-sidebar-w: 352px; /* @kind spacing */ /* развёрнутый док; рейка ВХОДИТ в эту ширину */
--g-head-h: 32px; /* @kind spacing */ /* шапка дока */
/* Дерево / список */
--g-tree-indent-base: 8px; /* @kind spacing */ /* отступ нулевого уровня */
--g-tree-indent: 12px; /* @kind spacing */ /* прибавка на уровень */
--g-tree-row-h: 24px; /* @kind spacing */ /* строка списка — НЕ строка свойства (34px) */
/* Канвас — сетка. Значения совпадают с реализацией (React Flow gap/size),
иначе привязка к сетке и фон разъедутся. */
--g-grid: 20px; /* @kind spacing */
--g-grid-dot: 1px; /* @kind spacing */
/* Связи и порты.
🔴 Линия связи берёт ТУ ЖЕ лестницу яркости, что и текст, а не свою:
покой = ступень faint, наведение = ступень dim. Замер на фоне полотна:
#6f6f6f даёт 3.2:1 (порог для нечитаемых элементов — 3:1), #9a9a9a — 5.5:1,
акцент #2563eb — 3.3:1. Прежний кандидат #4a4a4a давал 1.9:1: линия в 1.5px
на таком контрасте просто теряется, а именно она несёт структуру графа. */
--g-edge: var(--g-faint); /* @kind color */
--g-edge-hover: var(--g-dim); /* @kind color */
--g-edge-selected: var(--g-accent); /* @kind color */ /* выбрано = акцент, как везде */
--g-edge-w: 1.5px; /* @kind spacing */
--g-edge-w-active: 2.5px; /* @kind spacing */
--g-edge-hit: 24px; /* @kind spacing */ /* невидимая полоса клика */
--g-port: 12px; /* @kind spacing */ /* диаметр порта */
--g-port-ring: 2px; /* @kind spacing */ /* ободок порта цветом карточки */
/* ── СМЫСЛОВОЙ СПЕКТР: КАНАЛЫ, АЛЬФЫ, НОТЫ ────────────────────────────────
🔴 РАЗБОРНАЯ ФОРМА СПЕКТРА — чтобы потребитель мог СОБРАТЬ тинт, а не копировать
готовые числа. До этого формула жила только внутри классов `.g-tint-*`, и слой
редактора, которому нужны те же цвета в СВОИХ селекторах, физически не мог их
переиспользовать — там осело ~200 литералов, и правка спектра до канваса не доходила.
Теперь: каналы отдельно, альфы отдельно, нота текста отдельно.
background: rgba(var(--g-hue-amber), var(--g-tint-a)); фон тинта
background: rgba(var(--g-hue-amber), var(--g-tint-a-strong)); выделенный
border-color: rgba(var(--g-hue-amber), var(--g-tint-a-line)); рамка
color: var(--g-ink-amber); текст/значок
🔴 Каналы БЕЗ alpha и без `rgb()` — только «R,G,B». Иначе их нельзя подставить
внутрь `rgba()`, а именно это и нужно потребителю. */
--g-hue-green: 34,197,94; /* @kind color */ /* #22c55e */
--g-hue-cyan: 6,182,212; /* @kind color */ /* #06b6d4 */
--g-hue-blue: 59,130,246; /* @kind color */ /* #3b82f6 */
--g-hue-amber: 245,158,11; /* @kind color */ /* #f59e0b */
--g-hue-red: 239,68,68; /* @kind color */ /* #ef4444 */
--g-hue-violet: 139,92,246; /* @kind color */ /* #8b5cf6 */
--g-hue-indigo: 99,102,241; /* @kind color */ /* #6366f1 */
--g-hue-fuchsia: 217,70,239; /* @kind color */ /* #d946ef */
--g-hue-teal: 20,184,166; /* @kind color */ /* #14b8a6 */
--g-hue-lime: 132,204,22; /* @kind color */ /* #84cc16 */
--g-hue-emerald: 16,185,129; /* @kind color */ /* #10b981 */
--g-hue-sky: 14,165,233; /* @kind color */ /* #0ea5e9 */
--g-hue-rose: 244,63,94; /* @kind color */ /* #f43f5e */
--g-hue-pink: 236,72,153; /* @kind color */ /* #ec4899 */
--g-hue-orange: 249,115,22; /* @kind color */ /* #f97316 */
--g-hue-yellow: 234,179,8; /* @kind color */ /* #eab308 */
--g-hue-neutral: 148,148,148; /* @kind color */ /* #949494 */
--g-ink-green: #86efac; /* @kind color */ /* роль: start */
--g-ink-cyan: #67e8f9; /* @kind color */ /* роль: глава */
--g-ink-blue: #93c5fd; /* @kind color */ /* роль: панель/сцена */
--g-ink-amber: #fcd34d; /* @kind color */ /* роль: выбор */
--g-ink-red: #fca5a5; /* @kind color */ /* роль: финал/удаление */
--g-ink-violet: #c4b5fd; /* @kind color */ /* роль: условие */
--g-ink-indigo: #a5b4fc; /* @kind color */ /* роль: результат */
--g-ink-fuchsia: #f0abfc; /* @kind color */ /* роль: интерактив */
--g-ink-teal: #5eead4; /* @kind color */ /* роль: переменная */
--g-ink-lime: #bef264; /* @kind color */ /* роль: схождение */
--g-ink-emerald: #6ee7b7; /* @kind color */ /* роль: — */
--g-ink-sky: #7dd3fc; /* @kind color */ /* роль: — */
--g-ink-rose: #fda4af; /* @kind color */ /* роль: — */
--g-ink-pink: #f9a8d4; /* @kind color */ /* роль: — */
--g-ink-orange: #fdba74; /* @kind color */ /* роль: — */
--g-ink-yellow: #fde047; /* @kind color */ /* роль: — */
--g-ink-neutral: #cfcfcf; /* @kind color */ /* роль: черновик/выкл */
/* Альфы формулы — ОДНО место на всю систему. Меняешь насыщенность спектра здесь,
и она едет и в классы `.g-tint-*`, и во все selectors потребителя. */
--g-tint-a: .16; /* @kind other */ /* фон тинта */
--g-tint-a-strong: .26; /* @kind other */ /* выделенный фон */
--g-tint-a-line: .45; /* @kind other */ /* рамка */
/* 🔴 «Нейтраль» звучит ТИШЕ остальных нот намеренно: это «черновик/выключено»,
он не должен спорить со смысловыми оттенками. Поэтому у него свои альфы,
а не общие — и они тоже живут здесь, а не литералами в классе. */
--g-tint-a-mute: .14; /* @kind other */
--g-tint-a-line-mute: .40; /* @kind other */
/* ── ЦВЕТА ТИПОВ НОД ──────────────────────────────────────────────────────
🔴 ЕДИНСТВЕННЫЙ ХОЗЯИН ЭТИХ ЗНАЧЕНИЙ — ЭТОТ ФАЙЛ (решение владельца 2026-07-29).
Раньше поверх дефолтов в коде побеждало админ-переопределение `platform.node_colors`
(Панель администратора → «Цвета нод граф-редактора»), и правка системы до канваса
не доходила. Теперь наоборот: редактор читает эти переменные, админка на них не влияет.
Значения — нота `<оттенок>-300` смыслового спектра: это цвет ЗНАЧКА и заливки
мини-карты на тёмном, а не фон плашки. Роли 1-в-1 из graphite.tokens.json. */
--g-node-start: var(--g-ink-green); /* @kind color */ /* green — начало истории */
--g-node-scene: var(--g-ink-blue); /* @kind color */ /* blue — сцена/панель */
--g-node-page: var(--g-ink-blue); /* @kind color */ /* blue — страница */
--g-node-content: var(--g-ink-blue); /* @kind color */ /* blue — контент */
--g-node-chapter: var(--g-ink-cyan); /* @kind color */ /* cyan — глава */
--g-node-choice: var(--g-ink-amber); /* @kind color */ /* amber — выбор */
--g-node-condition: var(--g-ink-violet); /* @kind color */ /* violet — условие */
--g-node-interactive: var(--g-ink-fuchsia); /* @kind color */ /* fuchsia — интерактив */
--g-node-poll: var(--g-ink-fuchsia); /* @kind color */ /* fuchsia — опрос */
--g-node-quiz: var(--g-ink-fuchsia); /* @kind color */ /* fuchsia — квиз */
--g-node-results: var(--g-ink-indigo); /* @kind color */ /* indigo — результаты */
--g-node-merge: var(--g-ink-lime); /* @kind color */ /* lime — схождение */
--g-node-ending: var(--g-ink-red); /* @kind color */ /* red — финал */
--g-node-fallback: var(--g-ink-neutral); /* @kind color */ /* neutral — неизвестный тип */
/* Сирота — НАДТИП: нода ВНЕ ГРАФА. Живёт поверх любого типа (глава-сирота остаётся
cyan), поэтому это не цвет значка, а цвет ОБВОДКИ карточки.
🔴 ОПРЕДЕЛЕНИЕ УТОЧНЕНО 2026-08-03 (владелец): сирота — не «нода без входящих и
исходящих», а всё, до чего НЕ ДОХОДИТ ОБХОД ОТ НАЧАЛА. Разница не тонкая: оторванный
фрагмент из двух связанных между собой нод под прежнее правило не попадал вовсе —
в панели он лежал в «Не связаны», а на полотне не помечался ничем. Набор обязан
совпадать с тем, что панель выносит в «Не связаны», иначе два места говорят разное.
🔴 Оттенок orange занят только этой ролью: red — финал и удаление, amber — выбор,
иначе «оторвана» читалась бы как «финал». */
--g-node-orphan: var(--g-ink-orange); /* orange — сирота: нода вне графа. @kind color */
/* Геометрия обводки сироты. 🔴 ВЫНЕСЕНА В ТОКЕНЫ НЕ РАДИ НАСТРАИВАЕМОСТИ, а потому что
у надтипа ДВЕ поверхности отрисовки: карточка на полотне (CSS `outline`) и нода на
мини-карте (SVG `stroke`). Пока числа стояли литералами в каждой из них, они
совпадали ПО СОВПАДЕНИЮ, а не по устройству: правка в системе не доходила до
потребителя, и расхождение было НЕМЫМ — обводка просто оказывалась разной толщины
на одной поверхности из двух, без ошибки и предупреждения. */
--g-node-orphan-w: 2px; /* @kind spacing */ /* толщина штриха — обе поверхности */
--g-node-orphan-outline: var(--g-node-orphan-w) dashed var(--g-node-orphan); /* @kind other */
--g-node-orphan-offset: 2px; /* @kind spacing */ /* зазор обводки до кромки карточки */
--g-node-orphan-offset-selected: 3px; /* @kind spacing */ /* у выделенной шире: акцентная рамка обязана остаться видна */
/* SVG-двойник пунктира: на мини-карте штрих задаётся `stroke-dasharray`, а не ключевым
словом `dashed` — канал другой, поэтому значение обязано жить рядом со своим. */
--g-node-orphan-dasharray: 3 2; /* @kind other */
/* ── ЗНАЧКИ ТИПОВ НОД ─────────────────────────────────────────────────────
🔴 ПАРА К ЦВЕТАМ ВЫШЕ. Цвет типа ноды жил в системе, а ЗНАЧОК того же типа —
в коде редактора (карта `start: 'rocket'` в TSX). Одно понятие, два хозяина:
перекрасить старт можно было здесь, а заменить ему значок — только правкой кода
и пересборкой фронта. Теперь оба свойства типа живут рядом и правятся тут.
Значение — ИМЯ СИМВОЛА в спрайте без префикса `g-`. Список доступных имён —
в `graphite.icons.json` и в карточке витрины «Глифы: таблица соответствий».
🔴 Имени нет в спрайте — значок молча не нарисуется (отказ спрайта немой):
сверяйся с таблицей, а не по памяти. */
--g-node-icon-start: rocket; /* @kind other */
--g-node-icon-scene: film; /* @kind other */
--g-node-icon-page: file-text; /* @kind other */
--g-node-icon-content: file-text; /* @kind other */
--g-node-icon-chapter: book-open; /* @kind other */
--g-node-icon-choice: git-branch; /* @kind other */
--g-node-icon-condition: diamond; /* @kind other */
--g-node-icon-interactive: zap; /* @kind other */
--g-node-icon-poll: zap; /* @kind other */
--g-node-icon-quiz: zap; /* @kind other */
--g-node-icon-results: bar-chart-3; /* @kind other */
--g-node-icon-merge: git-merge; /* @kind other */
--g-node-icon-ending: flag; /* @kind other */
--g-node-icon-result: dices; /* @kind other */
--g-node-icon-fallback: circle; /* @kind other */
--g-node-icon-orphan: alert-triangle; /* @kind other */ /* значок надтипа — в дереве и в проверках */
/* Значки типов ПЕРЕМЕННЫХ — та же логика */
--g-var-icon-number: hash; /* @kind other */
--g-var-icon-boolean: toggle-left; /* @kind other */
--g-var-icon-string: type; /* @kind other */
/* ── ТИПЫ МЕДИА: нота и значок ───────────────────────────────────────────
Пара к `--g-node-*` / `--g-node-icon-*`, только для медиатеки. Оба свойства типа
лежат рядом и правятся в одном месте — иначе цвет живёт в системе, а глиф в коде.
🔴 Зачем ноте быть в системе, если тип и так подписан словом. Замер 2026-07-31:
«Недавние» красили значок типа (image=green, video=blue, audio=violet, text=amber),
а «Все медиа» рисовали ТОТ ЖЕ значок без цвета. Один список, два решения — читатель
не понимает, значит ли цвет что-нибудь. Система назначает ноту ОДИН раз. */
--g-media-image: var(--g-ink-green); /* @kind color */
--g-media-video: var(--g-ink-blue); /* @kind color */
--g-media-audio: var(--g-ink-violet); /* @kind color */
--g-media-text: var(--g-ink-amber); /* @kind color */
--g-media-icon-image: image; /* @kind other */
--g-media-icon-video: video; /* @kind other */
--g-media-icon-audio: music; /* @kind other */
--g-media-icon-text: file-text; /* @kind other */
/* Инструменты над списком. Значки НЕ произвольные: фильтр — «отмеченный список»,
сортировка — «две стрелки», направление — та же стрелка с приоритетом. */
--g-media-icon-filter: list-checks; /* @kind other */
--g-media-icon-sort: arrow-down-up; /* @kind other */
--g-media-icon-upload: upload; /* @kind other */
--g-media-icon-picked: check; /* @kind other */ /* подмена значка у выбранного пункта меню */
/* ── ТЕХНИЧЕСКИЕ ПОДЛОЖКИ ────────────────────────────────────────────────
🔴 Светлая подложка превью — НАМЕРЕННО светлая (решение владельца): на ней видны
прозрачные PNG, белый логотип на прозрачном фоне на тёмном исчез бы. Это не
недокрашенное место; менять — только осознанно. */
--g-media-canvas: #e5e5e5; /* @kind color */ /* холст превью в медиа-пуле */
--g-scrim: rgba(0,0,0,.5); /* @kind color */ /* затемнение под бейджем/кнопкой поверх картинки */
--g-scrim-soft: rgba(0,0,0,.35); /* @kind color */ /* лёгкое затемнение: подпись поверх полотна */
/* Слои. 🔴 Числа не декоративные: в редакторе на них уже наступали
(легаси нав-полоса перехватывала клики над правым доком). */
--g-z-panel: 240; /* @kind other */ /* пришвартованный док */
--g-z-dock: 250; /* @kind other */ /* док, который должен быть ВЫШЕ соседнего */
--g-z-menu: 1200; /* @kind other */ /* портальное меню/поповер */
/* Уровень вложенности строки дерева. Дефолт живёт здесь, а не на .g-tree-row:
токен под селектором компонента системой не регистрируется. Строка задаёт свой
уровень инлайном: style="--g-depth:2". */
--g-depth: 0; /* @kind other */
/* Заливка глифа. Дефолт `none` живёт здесь (символы объявлены с
`fill="var(--g-icon-fill, none)"`), атрибут `data-icon-fill` на самом