/* Калька D-1 — BRIDGE: перевод легаси-токенов на канон gd-tokens.css. Ред. 1 · 17.08.2026 · docs/DESIGN-SYSTEM-kalka.md Подключается ТОЛЬКО при config.KALKA_ENABLED (templates/_kalka_css.html, #35.1 — дефолт OFF). НИ ОДНОГО hex-кода и имени шрифта здесь быть не должно — только var(--gd-*) и color-mix от них (греп-приёмка F). Каскад (разведка 2026-08-17, wf kalka-bridge-recon): 1. variables.css — UNLAYERED и бьёт app.css @layer base; bridge тоже unlayered и грузится ПОЗЖЕ → выигрывает поздним порядком. 2. Editorial Calm держит свои примитивы (--paper/--ink/--rule/--accent) под [data-theme="editorial"] на , а legacy-aliases.css перенаправляет легаси-имена на них НА УРОВНЕ BODY — инherited-переменная с body перебивает :root независимо от порядка. Поэтому у каждого блока здесь селекторная батарея: :root, тёмная тема и оба editorial-скоупа. 3. Тёмная тема легаси = data-theme="dark" на ; ночь Кальки («Синька») в gd-tokens.css отвечает и на "night", и на "dark" (селектор расширен там же) — bridge ссылается на var(--gd-*) и переключается сам. 4. Tailwind 4 @theme (--color-*) компилирует утилиты bg-primary/text-… на СОБСТВЕННЫЕ переменные — их переопределяем отдельным блоком. Осознанные решения bridge-этапа (уточняются на D-5, StatusChip кодирует статус иконкой+текстом, не только цветом): • success → петроль --gd-water (зелёного в Кальке нет — канон F); • warning → сурик --gd-signal (сливается с danger: оба «требуют внимания»); • тени → none (чертёж плоский), скругления → 0 (включая пилюли/аватары); • категорийные цвета карт (--art-*) → тональная шкала + water/signal, различимость категорий добивается штриховками .hz-* на D-7. */ /* ═══ 1. Примитивы Editorial Calm → Калька ══════════════════════════════ ds-компоненты (18 файлов design-system/components/*) читают эти имена напрямую; legacy-aliases.css ссылается на них через var() и перекрасится автоматически. Грузимся позже colors.css — побеждаем порядком. Тёмная батарея ОБЯЗАТЕЛЬНА: у colors.css есть блок :root[data-theme="dark"] [data-theme="editorial"] (0-3-0) — без неё в тёмной теме побеждал Editorial-dark и фон был #1a1a1a вместо «Синьки» (поймано прод-проверкой тёмной темы 2026-08-17). */ [data-theme="editorial"], :root[data-theme="dark"] [data-theme="editorial"] { --paper: var(--gd-paper); --paper-edge: var(--gd-field); --paper-2: color-mix(in srgb, var(--gd-paper) 70%, var(--gd-field)); --paper-3: color-mix(in srgb, var(--gd-paper) 80%, var(--gd-hair)); --ink: var(--gd-ink); --ink-2: var(--gd-ink); --ink-3: var(--gd-muted); --ink-4: var(--gd-edge); --rule: var(--gd-hair); --rule-2: color-mix(in srgb, var(--gd-hair) 60%, var(--gd-paper)); --rule-strong: var(--gd-ink); --accent: var(--gd-water); --accent-ink: var(--gd-paper); --accent-tint: color-mix(in srgb, var(--gd-water) 12%, var(--gd-paper)); --good: var(--gd-water); --good-tint: color-mix(in srgb, var(--gd-water) 12%, var(--gd-paper)); --bad: var(--gd-signal); --bad-tint: color-mix(in srgb, var(--gd-signal) 12%, var(--gd-paper)); --warn: var(--gd-signal); --warn-tint: color-mix(in srgb, var(--gd-signal) 8%, var(--gd-paper)); --map-base: var(--gd-paper); --map-stroke: var(--gd-edge); --map-water: var(--gd-water); } /* ═══ 2. Легаси-токены (variables.css + app.css) → Калька ═══════════════ Селекторная батарея закрывает все четыре поля боя каскада: светлый :root, тёмный :root, editorial-body и тёмный editorial-body (два последних нейтрализуют legacy-aliases.css поздним порядком). */ :root, :root[data-theme="dark"], html:not([data-theme="dark"]) body[data-theme="editorial"], :root[data-theme="dark"] body[data-theme="editorial"] { /* — фон и поверхности — */ --bg-primary: var(--gd-paper); --bg-base: var(--gd-paper); --bg-secondary: var(--gd-field); --bg-tertiary: color-mix(in srgb, var(--gd-paper) 70%, var(--gd-field)); --bg-hover: color-mix(in srgb, var(--gd-paper) 60%, var(--gd-field)); --bg-muted: var(--gd-field); --bg-card: var(--gd-field); --bg-elevated: var(--gd-field); --bg-code: var(--gd-field); /* --bg-overlay остаётся легаси (затемнение модалки — вне палитры) */ /* — текст — */ --text-primary: var(--gd-ink); --text-secondary: var(--gd-muted); --text-muted: var(--gd-muted); --text-light: var(--gd-muted); --text-inverse: var(--gd-paper); --text-code: var(--gd-ink); /* — границы: разделители hair, контролы edge (канон Кальки) — */ --border: var(--gd-hair); --border-light: color-mix(in srgb, var(--gd-hair) 60%, var(--gd-paper)); --border-dark: var(--gd-edge); --border-color: var(--gd-hair); --border-strong: var(--gd-edge); /* — акценты — */ --primary: var(--gd-water); --primary-dark: color-mix(in srgb, var(--gd-water) 85%, var(--gd-ink)); --primary-light: color-mix(in srgb, var(--gd-water) 55%, var(--gd-paper)); --primary-lighter: color-mix(in srgb, var(--gd-water) 30%, var(--gd-paper)); --primary-lightest: color-mix(in srgb, var(--gd-water) 14%, var(--gd-paper)); --secondary: var(--gd-water); --secondary-dark: color-mix(in srgb, var(--gd-water) 85%, var(--gd-ink)); --accent: var(--gd-signal); --accent-light: color-mix(in srgb, var(--gd-signal) 14%, var(--gd-paper)); --accent-color: var(--gd-signal); --accent-hover: color-mix(in srgb, var(--gd-signal) 85%, var(--gd-ink)); --accent-subtle: color-mix(in srgb, var(--gd-signal) 12%, var(--gd-paper)); /* — статусы (см. решения в шапке: success→water, warning→signal) — */ --success: var(--gd-water); --success-dark: color-mix(in srgb, var(--gd-water) 85%, var(--gd-ink)); --success-light: color-mix(in srgb, var(--gd-water) 55%, var(--gd-paper)); --success-lighter: color-mix(in srgb, var(--gd-water) 30%, var(--gd-paper)); --success-lightest: color-mix(in srgb, var(--gd-water) 14%, var(--gd-paper)); --warning: var(--gd-signal); --warning-dark: color-mix(in srgb, var(--gd-signal) 85%, var(--gd-ink)); --warning-light: color-mix(in srgb, var(--gd-signal) 55%, var(--gd-paper)); --warning-lighter: color-mix(in srgb, var(--gd-signal) 30%, var(--gd-paper)); --warning-lightest: color-mix(in srgb, var(--gd-signal) 10%, var(--gd-paper)); --danger: var(--gd-signal); --danger-dark: color-mix(in srgb, var(--gd-signal) 85%, var(--gd-ink)); --danger-light: color-mix(in srgb, var(--gd-signal) 55%, var(--gd-paper)); --danger-lighter: color-mix(in srgb, var(--gd-signal) 30%, var(--gd-paper)); --danger-lightest: color-mix(in srgb, var(--gd-signal) 12%, var(--gd-paper)); --info: var(--gd-water); --info-dark: color-mix(in srgb, var(--gd-water) 85%, var(--gd-ink)); --info-light: color-mix(in srgb, var(--gd-water) 55%, var(--gd-paper)); --info-lighter: color-mix(in srgb, var(--gd-water) 30%, var(--gd-paper)); --info-lightest: color-mix(in srgb, var(--gd-water) 14%, var(--gd-paper)); --status-success: var(--gd-water); --status-success-bg: color-mix(in srgb, var(--gd-water) 10%, var(--gd-paper)); --status-warning: var(--gd-signal); --status-warning-bg: color-mix(in srgb, var(--gd-signal) 8%, var(--gd-paper)); --status-danger: var(--gd-signal); --status-danger-bg: color-mix(in srgb, var(--gd-signal) 12%, var(--gd-paper)); --status-info: var(--gd-water); --status-info-bg: color-mix(in srgb, var(--gd-water) 10%, var(--gd-paper)); /* — «белый»/«чёрный» и серая шкала — */ --dark: var(--gd-ink); --white: var(--gd-paper); --gray-900: var(--gd-ink); --gray-800: var(--gd-ink); --gray-700: var(--gd-ink); --gray-600: var(--gd-muted); --gray-500: var(--gd-muted); --gray-400: var(--gd-edge); --gray-300: var(--gd-hair); --gray-200: var(--gd-hair); --gray-100: var(--gd-field); --gray-50: var(--gd-field); /* — категорийные цвета культурной карты (до D-7: там добавятся .hz-*) — */ --art-street: var(--gd-tone-1); --art-music: var(--gd-water); --art-visual: var(--gd-tone-2); --art-design: var(--gd-tone-3); --art-event: var(--gd-signal); --art-other: var(--gd-tone-3); /* — геометрия: чертёж не имеет скруглений и теней — */ --radius-xs: var(--gd-radius); --radius-sm: var(--gd-radius); --radius: var(--gd-radius); --radius-md: var(--gd-radius); --radius-lg: var(--gd-radius); --radius-xl: var(--gd-radius); --radius-2xl: var(--gd-radius); --radius-full: var(--gd-radius); --radius-DEFAULT: var(--gd-radius); --shadow-xs: none; --shadow-sm: none; --shadow: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-2xl: none; --shadow-inner: none; --shadow-DEFAULT: none; /* — типографика: sans в Кальке не используется — */ --font-sans: var(--gd-serif); --font-serif: var(--gd-serif); --font-mono: var(--gd-mono); --font-size-2xs: var(--gd-t-label); --font-size-xs: var(--gd-t-small); --font-size-sm: var(--gd-t-small); --font-size-base: var(--gd-t-body); --font-size-md: var(--gd-t-body); --font-size-lg: var(--gd-t-h2); --font-size-xl: var(--gd-t-h2); --font-size-2xl: var(--gd-t-num); --font-size-3xl: var(--gd-t-display); --font-size-4xl: var(--gd-t-display); /* ═══ 3. Tailwind @theme (--color-*): утилиты bg-* и text-* читают ИХ ═══ Семантические --color-surface* / --color-on-surface* / --color-border* уже ссылаются на легаси-var и перекрашиваются сами. ВАЖНО: внутри CSS-комментария НЕЛЬЗЯ писать «звёздочка+слэш» слитно (шаблон вида bg-* слэш text-*) — последовательность закрывает коммент досрочно, и парсер съедает следующую декларацию до «;». Ровно так тут молча погибал --color-primary (петроль), оставляя легаси-фиолетовый. */ --color-primary: var(--gd-water); --color-primary-dark: color-mix(in srgb, var(--gd-water) 85%, var(--gd-ink)); --color-primary-light: color-mix(in srgb, var(--gd-water) 55%, var(--gd-paper)); --color-primary-lighter: color-mix(in srgb, var(--gd-water) 30%, var(--gd-paper)); --color-primary-lightest: color-mix(in srgb, var(--gd-water) 14%, var(--gd-paper)); --color-secondary: var(--gd-water); --color-secondary-dark: color-mix(in srgb, var(--gd-water) 85%, var(--gd-ink)); --color-accent: var(--gd-signal); --color-accent-light: color-mix(in srgb, var(--gd-signal) 14%, var(--gd-paper)); --color-success: var(--gd-water); --color-success-dark: color-mix(in srgb, var(--gd-water) 85%, var(--gd-ink)); --color-success-light: color-mix(in srgb, var(--gd-water) 55%, var(--gd-paper)); --color-success-lighter: color-mix(in srgb, var(--gd-water) 30%, var(--gd-paper)); --color-success-lightest: color-mix(in srgb, var(--gd-water) 14%, var(--gd-paper)); --color-warning: var(--gd-signal); --color-warning-dark: color-mix(in srgb, var(--gd-signal) 85%, var(--gd-ink)); --color-warning-light: color-mix(in srgb, var(--gd-signal) 55%, var(--gd-paper)); --color-warning-lighter: color-mix(in srgb, var(--gd-signal) 30%, var(--gd-paper)); --color-warning-lightest: color-mix(in srgb, var(--gd-signal) 10%, var(--gd-paper)); --color-danger: var(--gd-signal); --color-danger-dark: color-mix(in srgb, var(--gd-signal) 85%, var(--gd-ink)); --color-danger-light: color-mix(in srgb, var(--gd-signal) 55%, var(--gd-paper)); --color-danger-lighter: color-mix(in srgb, var(--gd-signal) 30%, var(--gd-paper)); --color-danger-lightest: color-mix(in srgb, var(--gd-signal) 12%, var(--gd-paper)); --color-info: var(--gd-water); --color-info-dark: color-mix(in srgb, var(--gd-water) 85%, var(--gd-ink)); --color-info-light: color-mix(in srgb, var(--gd-water) 55%, var(--gd-paper)); --color-info-lighter: color-mix(in srgb, var(--gd-water) 30%, var(--gd-paper)); --color-info-lightest: color-mix(in srgb, var(--gd-water) 14%, var(--gd-paper)); --color-dark: var(--gd-ink); --color-art-street: var(--gd-tone-1); --color-art-music: var(--gd-water); --color-art-visual: var(--gd-tone-2); --color-art-design: var(--gd-tone-3); --color-art-event: var(--gd-signal); --color-art-other: var(--gd-tone-3); }