/* ============================================================================= NeurA Design Tokens — единый слой оформления платформы NeuraDeck Источник истины: docs/design/DESIGN_SYSTEM.md Как подключать: файл копируется в модуль (public/tokens.css, assets/tokens.css или инлайном в одностраничного виджета) и подключается ПЕРВЫМ, до собственных стилей. Ссылаться на этот файл по сети нельзя — корневая docs/ не входит ни в один репозиторий и не деплоится. Тема по умолчанию — светлая. Тёмная включается атрибутом на : . Значение всегда конкретное (light | dark); «как в системе» разрешается в theme.js и сюда не попадает. ============================================================================= */ :root { color-scheme: light; /* --- Холст и поверхности ------------------------------------------------ */ --bg: #ffffff; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f5f9; --overlay: rgba(15, 23, 42, 0.45); --glass: rgba(255, 255, 255, 0.78); /* Техническая сетка — подпись платформы. Применяется к фону страницы: background-image: var(--bg-grid-image); background-size: var(--grid-size); */ --grid: #e9ecf0; --grid-size: 32px 32px; --bg-grid-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); /* --- Границы ------------------------------------------------------------ */ --border: #e5e7eb; --border-strong: #cbd5e1; /* --- Текст -------------------------------------------------------------- */ --text: #0f172a; --text-2: #334155; --text-muted: #64748b; --text-on-brand: #ffffff; --text-on-accent: #1a1200; /* === УРОВЕНЬ 1: переменные темы ========================================= Шесть цветов и три шрифта — всё, что задаёт пресет. Меняются только на корневом элементе продукта классами .theme-* и .font-* (см. конец файла). Значения по умолчанию — пресет blueprint, стандарт Академии. В коде компонентов эти переменные НЕ используются: только рабочие ниже. */ --theme-deep: #1e3a8a; /* глубокий: заголовки, объём, начало градиента */ --theme-vivid: #3b82f6; /* живой: подсветка, состояния, конец градиента */ --theme-ink: #1d4ed8; /* текст и ссылки поверх светлого фона */ --theme-accent: #f97316; /* акцент-указатель, заливка */ --theme-accent-2: #fb923c; /* светлый конец акцентного градиента */ --theme-accent-ink: #c2410c; /* акцент как текст и значимая иконка на светлом */ --theme-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --theme-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --theme-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* === УРОВЕНЬ 2: рабочие токены ========================================== Выводятся из переменных темы. Пресет меняет одну переменную — здесь пересчитываются подсветки, границы, подложки и градиенты. */ /* --- Бренд -------------------------------------------------------------- */ --brand: var(--theme-deep); --brand-hover: color-mix(in oklab, var(--theme-deep) 82%, var(--theme-vivid)); --brand-vivid: var(--theme-vivid); --brand-ink: var(--theme-ink); --brand-line: color-mix(in oklab, var(--theme-vivid) 32%, #ffffff); --brand-soft: color-mix(in oklab, var(--theme-vivid) 7%, #ffffff); --brand-soft-2: color-mix(in oklab, var(--theme-vivid) 16%, #ffffff); /* Градиент CTA: светлый конец — смесь 60/40, чтобы белый текст добирал 4.5:1 в любом пресете (для blueprint это ≈ #2563eb). Декоративный градиент — --grad-hero, он уходит до --theme-vivid и под мелкий текст не годится. */ --grad-brand: linear-gradient( 135deg, var(--theme-deep) 0%, color-mix(in oklab, var(--theme-deep) 60%, var(--theme-vivid)) 100% ); --grad-hero: linear-gradient(135deg, var(--theme-deep) 0%, var(--theme-vivid) 100%); /* --- Акцент (~10 % площади) --------------------------------------------- */ --accent: var(--theme-accent); /* заливка: только с тёмным --text-on-accent */ --accent-2: var(--theme-accent-2); --accent-ink: var(--theme-accent-ink); --accent-line: color-mix(in oklab, var(--theme-accent) 35%, #ffffff); --accent-soft: color-mix(in oklab, var(--theme-accent) 8%, #ffffff); --grad-accent: linear-gradient( 135deg, var(--theme-accent) 0%, var(--theme-accent-2) 100% ); /* --- Статусы: заливка / подложка / текст на подложке -------------------- */ --ok: #16a34a; --ok-soft: #ecfdf5; --ok-ink: #15803d; --warn: #f59e0b; --warn-soft: #fffbeb; --warn-ink: #b45309; --error: #dc2626; --error-soft: #fef2f2; --error-ink: #b91c1c; --info: #3b82f6; --info-soft: #eff6ff; --info-ink: #1d4ed8; /* --- Диалог (для модулей-чатов) ----------------------------------------- */ --bubble-user-bg: var(--grad-brand); --bubble-user-text: var(--text-on-brand); --bubble-assistant-bg: var(--surface); --bubble-assistant-text: var(--text); --bubble-system-bg: var(--surface-2); --code-bg: #0f172a; --code-text: #e8eefc; /* --- Геометрия ---------------------------------------------------------- */ --radius-sm: 8px; /* поля ввода, мелкие кнопки, чипы прямоугольные */ --radius: 12px; /* карточки, кнопки, попапы */ --radius-lg: 16px; /* модалки, крупные панели */ --radius-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* --- Тени и фокус ------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 10px 30px -14px rgba(30, 58, 138, 0.28); --shadow-lg: 0 24px 60px -24px rgba(30, 58, 138, 0.35); --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.35); /* --- Типографика -------------------------------------------------------- */ --font-display: var(--theme-font-display); /* заголовки, крупный текст */ --font-ui: var(--theme-font-ui); /* интерфейс и основной текст */ --font-mono: var(--theme-font-mono); --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; --lh: 1.55; --lh-tight: 1.25; /* --- Движение ----------------------------------------------------------- */ /* Кривые: базовая — для всего; out — вход элемента; in — уход; spring — короткий отскок подтверждения, только для мелких элементов. */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* Длительности: чем больше площадь движения, тем дольше. Потолок — --dur-page. */ --dur-instant: 90ms; --dur-fast: 140ms; --dur: 200ms; --dur-slow: 260ms; --dur-page: 420ms; /* --- Слои --------------------------------------------------------------- */ --z-sticky: 10; --z-popover: 100; --z-modal: 1000; --z-toast: 2000; } /* ============================================================================= Тёмная тема. Переопределяются ТОЛЬКО значения — имена, геометрия, типографика и движение общие с светлой. ============================================================================= */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0b1220; --surface: #131c2f; --surface-2: #1a2438; --surface-3: #222d44; --overlay: rgba(2, 6, 16, 0.65); --glass: rgba(19, 28, 47, 0.78); --grid: #182135; --border: #26324a; --border-strong: #3a4863; --text: #e8eefc; --text-2: #c2cde3; --text-muted: #8b9ab5; --text-on-brand: #ffffff; --text-on-accent: #1a1200; /* Переменные темы (--theme-*) здесь НЕ переопределяются — иначе пресет, заданный классом на , потерялся бы в тёмной теме. Меняется только способ вывода: в тёмной теме шкала переворачивается, «основной» становится светлым, потому что обязан читаться на тёмном холсте, а подложки уходят в глухие тёмные, а не в полупрозрачные поверх фона. */ --brand: color-mix(in oklab, var(--theme-vivid) 82%, #ffffff); --brand-hover: color-mix(in oklab, var(--theme-vivid) 62%, #ffffff); --brand-vivid: var(--theme-vivid); --brand-ink: color-mix(in oklab, var(--theme-vivid) 62%, #ffffff); --brand-line: color-mix(in oklab, var(--theme-deep) 72%, var(--surface)); --brand-soft: color-mix(in oklab, var(--theme-vivid) 14%, var(--bg)); --brand-soft-2: color-mix(in oklab, var(--theme-vivid) 25%, var(--bg)); /* На тёмном холсте кнопка сдвигается на ступень светлее: тёмный конец светлой темы дал бы всего 1.8:1 к фону. Белый текст сохраняет 4.9–5.6:1. */ --grad-brand: linear-gradient( 135deg, color-mix(in oklab, var(--theme-deep) 60%, var(--theme-vivid)) 0%, color-mix(in oklab, var(--theme-deep) 45%, var(--theme-vivid)) 100% ); --grad-hero: linear-gradient( 135deg, var(--theme-vivid) 0%, color-mix(in oklab, var(--theme-vivid) 75%, #ffffff) 100% ); --accent: color-mix(in oklab, var(--theme-accent) 80%, #ffffff); --accent-2: color-mix(in oklab, var(--theme-accent) 58%, #ffffff); --accent-ink: color-mix(in oklab, var(--theme-accent) 58%, #ffffff); --accent-line: color-mix(in oklab, var(--theme-accent) 42%, var(--bg)); --accent-soft: color-mix(in oklab, var(--theme-accent) 15%, var(--bg)); --grad-accent: linear-gradient( 135deg, color-mix(in oklab, var(--theme-accent) 85%, #000000) 0%, var(--accent) 100% ); --ok: #22c55e; --ok-soft: #10261a; --ok-ink: #4ade80; --warn: #f59e0b; --warn-soft: #2a1f0a; --warn-ink: #fbbf24; --error: #ef4444; --error-soft: #2d1214; --error-ink: #fca5a5; --info: #3b82f6; --info-soft: #14213c; --info-ink: #93c5fd; /* Пузыри диалога переопределять не нужно: они собраны из var(--surface) и var(--grad-brand) и следуют за темой сами. */ --code-bg: #060b16; --code-text: #e8eefc; /* На тёмном тень почти не читается: высоту даёт светлота поверхности и граница, а тень остаётся только чтобы отделить всплывающее от холста. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.7); --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.8); --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.45); } /* ============================================================================= Совместимость: имена --color-*, уже используемые в UI_BALANCE_STANDARD.md и в модулях m001, m002, m008, m010, m011. Новый код их не использует. ============================================================================= */ :root { --color-bg: var(--bg); --color-surface: var(--surface); --color-surface-alt: var(--surface-2); --color-surface-hover: var(--surface-3); --color-sidebar-bg: var(--surface-2); --color-input-bg: var(--surface); --color-border: var(--border); --color-text: var(--text); --color-text-secondary: var(--text-2); --color-primary: var(--brand); --color-primary-hover: var(--brand-hover); --color-primary-light: var(--brand-soft); --color-accent: var(--accent); --color-success: var(--ok); --color-success-bg: var(--ok-soft); --color-warning: var(--warn); --color-warning-bg: var(--warn-soft); --color-error: var(--error); --color-error-bg: var(--error-soft); --color-info: var(--info); --color-code-bg: var(--code-bg); --color-user-msg: var(--brand-soft); --color-assistant-msg: var(--bubble-assistant-bg); } /* ============================================================================= Базовый слой. Не оформление конкретного модуля, а то, без чего токены не дают одинаковой картинки: холст, шрифт, фокус, выделение, движение. ============================================================================= */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: var(--fs-base); line-height: var(--lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } button { cursor: pointer; } a { color: var(--brand-ink); } code, kbd, pre, samp { font-family: var(--font-mono); } ::selection { background: var(--brand-soft-2); color: var(--text); } :focus-visible { outline: 2px solid transparent; /* виден в режиме высокой контрастности */ outline-offset: 2px; box-shadow: var(--focus-ring); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 3px solid var(--bg); } *::-webkit-scrollbar-track { background: transparent; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* ============================================================================= ЦВЕТОВЫЕ ПРЕСЕТЫ — класс на корневом элементе продукта. Пресет задаёт только шесть переменных темы; рабочие токены и обе темы пересчитываются сами. Правила добавления нового пресета — раздел 11а.2 фирменного стиля: контраст глубокого цвета к белому не меньше 7:1, акцент тёплый при холодной основе и наоборот, пропорция 60/30/10 обязательна. ============================================================================= */ /* Базовый. Дублирует значения :root — нужен, чтобы пресет можно было переключать в разметке, не полагаясь на умолчание. */ .theme-blueprint { --theme-deep: #1e3a8a; --theme-vivid: #3b82f6; --theme-ink: #1d4ed8; --theme-accent: #f97316; --theme-accent-2: #fb923c; --theme-accent-ink: #c2410c; } /* Графит: строже и взрослее. Лендинги для руководителей и главных инженеров. */ .theme-graphite { --theme-deep: #1f2937; --theme-vivid: #4b5563; --theme-ink: #374151; --theme-accent: #f97316; --theme-accent-2: #fb923c; --theme-accent-ink: #c2410c; } /* Лес: природа и инженерия. Устойчивое строительство, дерево, экология. */ .theme-forest { --theme-deep: #14532d; --theme-vivid: #16a34a; --theme-ink: #15803d; --theme-accent: #f97316; --theme-accent-2: #fb923c; --theme-accent-ink: #c2410c; } /* Нуар: максимальный контраст, редакторская подача. Акцент жёлтый. */ .theme-noir { --theme-deep: #0f172a; --theme-vivid: #334155; --theme-ink: #1e293b; --theme-accent: #eab308; --theme-accent-2: #facc15; --theme-accent-ink: #854d0e; } /* Терракота: архитектурный, тёплый. Акцент голубой — указателем работает он. */ .theme-terracotta { --theme-deep: #7c2d12; --theme-vivid: #c2410c; --theme-ink: #9a3412; --theme-accent: #0ea5e9; --theme-accent-2: #38bdf8; --theme-accent-ink: #0369a1; } /* ============================================================================= ШРИФТОВЫЕ ПРЕСЕТЫ — класс на корневом элементе продукта. Пресет задаёт все три шрифта сразу; смешивать стеки внутри страницы нельзя. Сами файлы шрифтов подключает продукт (локально, а не с fonts.googleapis.com); если семейства нет — работает запасной системный стек. ============================================================================= */ .font-inter { --theme-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --theme-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --theme-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .font-grotesk { --theme-font-display: "Space Grotesk", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --theme-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --theme-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .font-manrope { --theme-font-display: "Manrope", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --theme-font-ui: "Manrope", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --theme-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .font-golos { --theme-font-display: "Golos Text", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --theme-font-ui: "Golos Text", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --theme-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .font-onest { --theme-font-display: "Onest", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --theme-font-ui: "Onest", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --theme-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .font-plex { --theme-font-display: "IBM Plex Sans", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --theme-font-ui: "IBM Plex Sans", "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --theme-font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ============================================================================= СЕТКА-ПЯТНО. Техническая сетка никогда не заливает экран сплошным ковром: она появляется под объектом, о котором речь, и растворяется к краям. Класс вешается на секцию; слой рисуется псевдоэлементом позади содержимого. Сплошная сетка без маски — вне стиля (раздел 3 фирменного стиля). ============================================================================= */ [class*="tb-spot-"] { position: relative; isolation: isolate; } [class*="tb-spot-"]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--bg-grid-image); background-size: var(--grid-size); -webkit-mask-image: var(--tb-spot); mask-image: var(--tb-spot); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* Пятно под объектом справа — герой с текстом слева и изометрией справа. */ .tb-spot-right { --tb-spot: radial-gradient( 60% 70% at 72% 50%, #000 0%, rgba(0, 0, 0, 0.65) 45%, transparent 78% ); } /* Зеркальный вариант — объект слева, текст справа. */ .tb-spot-left { --tb-spot: radial-gradient( 60% 70% at 28% 50%, #000 0%, rgba(0, 0, 0, 0.65) 45%, transparent 78% ); } /* Круглое пятно по центру — одиночный объект, пост-квадрат. */ .tb-spot-center { --tb-spot: radial-gradient( 42% 42% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.6) 50%, transparent 76% ); } /* Мягкое крупное пятно — центрированные обложки, широкие баннеры. */ .tb-spot-wide { --tb-spot: radial-gradient( 80% 90% at 50% 45%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 80% ); } /* Фрагмент в углу — тонкая деталь на письме или карточке. */ .tb-spot-corner { --tb-spot: radial-gradient( 45% 55% at 88% 12%, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 78% ); } /* Полоса под шапкой — верх слайда или лендинга, растворяется книзу. */ .tb-spot-band { --tb-spot: linear-gradient( 180deg, #000 0%, rgba(0, 0, 0, 0.75) 40%, transparent 100% ); }