/* ============================================================================ VIO DESIGN TOKENS — единый источник правды ---------------------------------------------------------------------------- Сгенерировано на основе аудита CSS 2026-06-01. Консолидирует слой токенов, начатый 2026-04-22 в style.css, и разрозненные :root компонентов (--lib-/--sub-/--sn-/--v-/--summary-). Грузится ПЕРВЫМ (до base_style.css) — задаёт базовые значения, которые остальные файлы могут переопределять осознанно. Три слоя: 1) PRIMITIVES — сырая палитра (шкалы), не использовать напрямую в компонентах. 2) SEMANTIC — роли (--color-primary, --text-*, --radius-*…). ИСПОЛЬЗОВАТЬ ЭТО. 3) ALIASES — мост для легаси/компонентных имён → semantic. Deprecated. Все значения = текущие реальные. Введение файла НЕ меняет внешний вид. Смена палитры (через выбранное Stitch-направление) делается правкой ТОЛЬКО слоя SEMANTIC — компоненты подхватят автоматически. ========================================================================== */ :root { /* ========================================================================== 1. PRIMITIVES — сырьё. Не ссылаться из компонентов напрямую. ========================================================================== */ /* Нейтральные — Tailwind slate (основная нейтральная шкала сайта) */ --c-white: #ffffff; --c-slate-50: #f8fafc; --c-slate-100: #f1f5f9; --c-slate-200: #e2e8f0; --c-slate-300: #cbd5e1; --c-slate-400: #94a3b8; --c-slate-500: #64748b; --c-slate-600: #475569; --c-slate-700: #334155; --c-slate-800: #1e293b; --c-slate-900: #0f172a; --c-gray-900: #111827; /* tailwind gray-900 — тёмные кнопки/ghost-hover */ --c-gray-500: #6b7280; --c-gray-200: #e5e7eb; /* «тёплая» граница (мягче slate-200) */ /* Бренд (синий) */ --c-blue-brand: #0040ff; /* фирменный акцент */ --c-blue-brand-d: #0036d9; /* hover */ --c-blue-brand-dd: #002db3; /* active */ --c-blue-600: #2563eb; /* вторичный синий (ссылки/инфо) */ --c-blue-700: #1d4ed8; --c-blue-50: #eff6ff; /* мягкая инфо-подложка */ /* Статусы */ --c-emerald-600: #059669; /* success — канон */ --c-emerald-500: #10b981; --c-emerald-50: #ecfdf5; --c-green-600: #16a34a; --c-red-600: #dc2626; /* danger — канон (текст/иконки) */ --c-red-bright: #ff1a1a; /* легаси --color-danger (кнопки) */ --c-red-700: #b91c1c; --c-red-50: #fef2f2; --c-red-100: #fee2e2; --c-amber-500: #f59e0b; /* warning-акцент */ --c-amber-700: #b45309; /* warning-текст (AA на светлом) */ --c-amber-50: #fffbeb; --c-amber-100: #fef3c7; --c-amber-bg: #fff4e5; /* badge-warn подложка */ --c-violet-600: #7c3aed; /* tier/premium-акценты */ --c-violet-50: #eef2ff; --c-indigo-600: #4f46e5; /* ========================================================================== 2. SEMANTIC — роли. ИСПОЛЬЗОВАТЬ В КОМПОНЕНТАХ ИМЕННО ЭТИ. Менять палитру сайта = править только этот блок. ========================================================================== */ /* Бренд / интерактив */ --color-primary: var(--c-blue-brand); --color-primary--hover: var(--c-blue-brand-d); --color-primary--active: var(--c-blue-brand-dd); --color-primary-soft: rgba(0, 64, 255, 0.08); /* фон/подсветка бренда */ --color-danger: var(--c-red-bright); --color-danger--hover: #d81111; --color-danger--active: #9f1111; --color-white: var(--c-white); /* Текст */ --text-primary: var(--c-slate-900); /* основной */ --text-secondary: var(--c-slate-500); /* метки/вспомогательный */ --text-tertiary: var(--c-slate-400); /* hints, empty-state */ --text-muted: var(--c-slate-600); /* промежуточный */ /* Поверхности */ --surface-base: var(--c-white); /* карточки/модалки */ --surface-subtle: var(--c-slate-50); /* самый светлый фон */ --surface-muted: var(--c-slate-100); /* нейтральная подложка / hover */ /* Границы / разделители */ --border-subtle: var(--c-slate-200); /* стандартная граница карточек */ --border-muted: var(--c-gray-200); /* мягче и теплее */ --divider-faint: var(--c-slate-300); /* тонкая линия */ /* Статусы (текст + подложка) */ --color-success: var(--c-emerald-600); --color-success-bg: var(--c-emerald-50); --color-warning: var(--c-amber-700); --color-warning-bg: var(--c-amber-50); --color-info: var(--c-blue-600); --color-info-bg: var(--c-blue-50); /* Бейджи остатка (WCAG AA) */ --badge-warn-bg: var(--c-amber-bg); --badge-warn-fg: var(--c-amber-700); --badge-danger-bg: var(--c-red-100); --badge-danger-fg: var(--c-red-700); /* Радиусы */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; /* таблетки/чипы */ --radius-full: 50%; /* круги (аватары) */ /* Тени */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06); --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.08); --focus-ring: 0 0 0 3px var(--color-primary-soft); /* Типографика */ --font-brand: 'Adderley', 'Inter', sans-serif; /* заголовки/бренд (имя с двумя d — канон) */ --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Переходы */ --transition-fast: 0.15s; /* hover фона/цвета */ --transition-base: 0.2s; --transition-slow: 0.3s ease; /* ========================================================================== 3. ALIASES (compat) — мост к существующим именам. Deprecated, не плодить. Каждый алиас указывает на точное текущее значение (0 регрессий). ========================================================================== */ /* Легаси-бренд (style.css) */ --primary: var(--color-primary); --primary-dark: var(--color-primary--hover); --font-adderley: var(--font-brand); --card-shadow: var(--shadow-lg); --transition: all var(--transition-slow); /* Легаси «flat»-палитра — почти не используется (var: 0–4). Сохранены точные значения для совместимости; кандидаты на удаление после миграции. */ --secondary: #ff6b6b; --accent: #48dbfb; --dark: #2d3436; --light: #f7f7f7; --gray: #636e72; --success: #1dd1a1; /* ВНИМАНИЕ: ≠ --color-success(#059669). Канон — color-success. */ --warning: #feca57; --border: #dfe6e9; /* ВНИМАНИЕ: ≠ --border-subtle(#e2e8f0). Близкие, но разные. */ /* get_creator (--lib-*) → semantic */ --lib-bg: var(--surface-subtle); --lib-hover: var(--surface-muted); --lib-line: var(--border-muted); --lib-ink: var(--text-primary); --lib-muted: var(--text-secondary); --lib-subtle: var(--text-tertiary); --lib-success: var(--color-success); --lib-success-bg: var(--color-success-bg); --lib-danger: var(--c-red-600); --lib-danger-bg: var(--c-red-50); --lib-warn: var(--color-warning); --lib-warn-bg: var(--color-warning-bg); --lib-r-sm: var(--radius-sm); --lib-r-md: var(--radius-md); --lib-r-lg: var(--radius-lg); /* subscriptions (--sub-*) → semantic */ --sub-bg: var(--surface-subtle); --sub-card: var(--surface-base); --sub-hover: var(--surface-muted); --sub-line: var(--border-muted); --sub-line-strong: var(--divider-faint); --sub-ink: var(--text-primary); --sub-muted: var(--text-secondary); --sub-subtle: var(--text-tertiary); --sub-accent: var(--color-primary); --sub-accent-soft: var(--color-primary-soft); --sub-success: var(--color-success); --sub-success-bg: var(--color-success-bg); --sub-warning: var(--color-warning); --sub-warning-bg: var(--c-amber-100); --sub-danger: var(--c-red-700); --sub-danger-bg: var(--c-red-100); --sub-r-sm: var(--radius-sm); --sub-r-md: var(--radius-md); --sub-r-lg: var(--radius-lg); --sub-shadow-sm: var(--shadow-xs); --sub-shadow-md: var(--shadow-md); --sub-shadow-lg: var(--shadow-lg); /* settings-notifications (--sn-*) → semantic */ --sn-primary: var(--color-primary); --sn-success: var(--color-success); --sn-subtle: var(--text-tertiary); --sn-r-sm: var(--radius-sm); --sn-r-md: var(--radius-md); --sn-r-lg: var(--radius-lg); /* verification (--v-*) → semantic */ --v-text: var(--text-primary); --v-muted: var(--text-secondary); --v-border: var(--border-muted); --v-accent: var(--color-primary); --v-success: var(--color-success); --v-danger: var(--c-red-600); }