/* * Qualims Design Tokens * Single source of truth for all visual decisions. * Import this before any other CSS. */ :root { /* ── Brand / Accent (Slate-teal) ─────────────────── */ --accent: #0d9488; /* teal-600 */ --accent-light: #14b8a6; /* teal-500 — hover highlights, light surfaces */ --accent-dark: #0f766e; /* teal-700 — hover on filled elements */ --accent-subtle: rgba(13, 148, 136, 0.08); --accent-glow: rgba(13, 148, 136, 0.25); /* ── Bootstrap 5.3 primary override → teal ──────── */ --bs-primary: #0d9488; --bs-primary-rgb: 13, 148, 136; --bs-primary-text-emphasis: #0f766e; --bs-primary-bg-subtle: rgba(13, 148, 136, 0.10); --bs-primary-border-subtle: rgba(13, 148, 136, 0.25); --bs-link-color: #0d9488; --bs-link-hover-color: #0f766e; --bs-link-color-rgb: 13, 148, 136; /* ── Neutral scale (Slate) ───────────────────────── */ --sl-950: #020617; --sl-900: #0f172a; --sl-800: #1e293b; --sl-700: #334155; --sl-600: #475569; --sl-500: #64748b; --sl-400: #94a3b8; --sl-300: #cbd5e1; --sl-200: #e2e8f0; --sl-100: #f1f5f9; --sl-50: #f8fafc; /* ── Semantic colors ─────────────────────────────── */ --color-success: #10b981; /* emerald-500 */ --color-success-subtle: rgba(16, 185, 129, 0.10); --color-success-border: rgba(16, 185, 129, 0.28); --color-warning: #f59e0b; /* amber-500 */ --color-warning-subtle: rgba(245, 158, 11, 0.10); --color-warning-border: rgba(245, 158, 11, 0.28); --color-danger: #ef4444; /* red-500 */ --color-danger-subtle: rgba(239, 68, 68, 0.10); --color-danger-border: rgba(239, 68, 68, 0.28); --color-info: var(--accent); --color-info-subtle: var(--accent-subtle); --color-info-border: var(--accent-glow); /* ── Spacing scale (4px base) ────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ /* ── Border radius ───────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* ── Shadows (elevation scale) ───────────────────── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.12); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.16); /* ── Typography ──────────────────────────────────── */ --font-sans: 'Inter', 'Segoe UI', Arial, sans-serif; --text-xs: 0.6875rem; /* 11px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.75rem; /* 28px */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ── Motion ──────────────────────────────────────── */ --motion-fast: 80ms; --motion-base: 140ms; --motion-slow: 220ms; --motion-ease: ease; /* ── Z-index ─────────────────────────────────────── */ --z-navbar: 1040; --z-modal: 1055; --z-toast: 1080; /* ── Glass / surface backgrounds ────────────────── */ --surface-white: rgba(255, 255, 255, 0.78); --surface-white-strong: rgba(255, 255, 255, 0.90); --surface-dark: rgba(15, 23, 42, 0.55); --surface-dark-strong: rgba(15, 23, 42, 0.70); /* ── Glassmorphism ───────────────────────────────── */ --glass-bg: rgba(255, 255, 255, 0.88); --glass-bg-card: rgba(255, 255, 255, 0.88); --glass-blur: blur(20px) saturate(160%); --glass-blur-sm: blur(10px) saturate(150%); --glass-border: rgba(255, 255, 255, 0.55); --glass-border-sm: rgba(255, 255, 255, 0.38); --glass-specular: inset 0 1px 0 rgba(255, 255, 255, 0.80); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), var(--glass-specular); /* ── Border scale ────────────────────────────────── */ --border-subtle: rgba(148, 163, 184, 0.20); --border-muted: rgba(148, 163, 184, 0.28); --border-dark: rgba(71, 85, 105, 0.45); --border-dark-md: rgba(71, 85, 105, 0.65); } /* ── Dark theme token overrides ───────────────────────── */ [data-theme="dark"] { --sl-50: #0f172a; --sl-100: #1e293b; --sl-200: #334155; --sl-300: #475569; --accent-subtle: rgba(20, 184, 166, 0.12); --accent-glow: rgba(20, 184, 166, 0.30); /* Bump muted text so it's readable on dark glass */ --sl-500: #94a3b8; --sl-600: #94a3b8; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.36); --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.42); --glass-bg: rgba(8, 16, 32, 0.76); --glass-bg-card: rgba(15, 28, 52, 0.62); --glass-border: rgba(255, 255, 255, 0.09); --glass-border-sm: rgba(255, 255, 255, 0.05); --glass-specular: inset 0 1px 0 rgba(255, 255, 255, 0.07); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.50), var(--glass-specular); } /* ════════════════════════════════════════════════════════════════════ Дизайн-система v2 — СВЕДЕНО с авторитетным docs/design/assets/tokens.css (ТЗ дизайнера v1.5). Этот блок идёт ПОСЛЕ legacy-словаря выше и переопределяет общие имена (типографика, тени, мотив, семантика) — это и есть глобальное переключение на новую систему. Legacy-токены (--sl-*, --bs-*, --color-*, --space-*, --radius-*, --glass-*, --shadow-lg/xl) НЕ трогаем — на них завязаны base.css / ui-modern.css / chat-widget.css. Закреплено с заказчиком: светлая тема по умолчанию + тёмная-паритет; ЕДИНСТВЕННЫЙ акцент teal; холодный slate-нейтрал (зашит дефолтом, без data-tone); washed-фон (включён по умолчанию, опт-аут data-bg="flat"); база 14px. ════════════════════════════════════════════════════════════════════ */ :root { /* — Типографика: база 14px (закреплённое решение, было 15). Переопределяет legacy --text-* выше. Моно — для CAS/артикулов/кодов ошибок. — */ --text-2xs: 0.6875rem; /* 11 */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.8125rem; /* 13 */ --text-base: 0.875rem; /* 14 ← было 15 */ --text-md: 0.9375rem; /* 15 */ --text-lg: 1.0625rem; /* 17 */ --text-xl: 1.375rem; /* 22 */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: 2.25rem; /* 36 ← было 34 */ --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; --w-normal: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; /* — Акцент (teal — единственный на продукт) — */ --accent-strong: #0f766e; --accent-hover: #0b8077; --accent-soft: rgba(13,148,136,.10); --accent-line: rgba(13,148,136,.28); --accent-glow: rgba(13,148,136,.20); --on-accent: #ffffff; --ink-on-accent: #ffffff; /* — Текст (ink) и поверхности — холодный slate, зашит дефолтом — */ --ink: #0f172a; --ink-2: #475569; --ink-3: #94a3b8; --surface: #ffffff; --surface-2: #f1f5f9; --surface-3: #e6edf3; --line: rgba(15,23,42,.10); --line-strong: rgba(15,23,42,.16); /* — Семантика (приглушённая: инструмент, не светофор) — */ --ok: #15875f; --ok-soft: rgba(21,135,95,.12); --ok-line: rgba(21,135,95,.30); --warn: #b5790f; --warn-soft: rgba(181,121,15,.12); --warn-line: rgba(181,121,15,.30); --bad: #c4453f; --bad-soft: rgba(196,69,63,.12); --bad-line: rgba(196,69,63,.30); /* — Радиусы — */ --r-sm: 7px; --r-md: 11px; --r-lg: 15px; --r-xl: 22px; --r-full: 9999px; /* — Тени: xs/sm/md переопределяют legacy (двухслойные, мягче); + pop — */ --shadow-xs: 0 1px 2px rgba(16,24,40,.05); --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.07); --shadow-md: 0 2px 6px rgba(16,24,40,.06), 0 8px 20px rgba(16,24,40,.08); --shadow-pop:0 12px 32px rgba(16,24,40,.14); /* — Мотив (новый тайминг + фирменный ease) — */ --m-fast: 110ms; --m-base: 170ms; --m-slow: 220ms; --ease: cubic-bezier(.2,.6,.2,1); /* — Spacing-алиасы (--s-N) — */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; /* — Тёмная панель навигации — */ --sidebar-bg: #0f1b2d; --sidebar-ink: rgba(255,255,255,.78); --sidebar-ink-2: rgba(255,255,255,.64); /* иконки сайдбара ярче (были тусклые) */ --sidebar-line: rgba(255,255,255,.08); --sidebar-active-bg: rgba(13,148,136,.22); /* — Подложка (washed, включена по умолчанию; опт-аут data-bg="flat"). Свет привязан к акценту через color-mix: сменили акцент — свет сам. */ --bg: #eef2f6; --bg-tint: radial-gradient(135% 70% at 50% -22%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 52%); } /* Плоский фон без свечения (опция data-bg="flat") */ :root[data-bg="flat"] { --bg-tint: transparent; } /* Тёмная тема — сведено с авторитетным dark-блоком (акцент ярче для контраста) */ [data-theme="dark"] { --accent: #16b8a6; --accent-strong: #2dd4bf; --accent-hover: #19c2af; --accent-soft: rgba(22,184,166,.14); --accent-line: rgba(22,184,166,.32); --accent-glow: rgba(22,184,166,.26); --ink: #e8eaed; --ink-2: #a7aeb8; --ink-3: #8b93a1; /* ярче в тёмной теме — иконки/приглушённый текст читаемее */ --surface: #141a21; --surface-2: #1b222b; --surface-3: #232c37; --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.15); --ok: #34d399; --ok-soft: rgba(52,211,153,.14); --ok-line: rgba(52,211,153,.30); --warn: #fbbf24; --warn-soft: rgba(251,191,36,.14); --warn-line: rgba(251,191,36,.30); --bad: #f87171; --bad-soft: rgba(248,113,113,.14); --bad-line: rgba(248,113,113,.30); --shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow-sm: 0 1px 3px rgba(0,0,0,.45); --shadow-md: 0 4px 16px rgba(0,0,0,.5); --shadow-pop:0 16px 40px rgba(0,0,0,.6); --sidebar-bg: #0a0e13; --sidebar-ink: rgba(255,255,255,.80); --sidebar-line: rgba(255,255,255,.06); --bg: #0b0f14; --bg-tint: radial-gradient(135% 70% at 50% -22%, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 52%); }