/** * DS TOKENS — Единая дизайн-система ПрофСервис-Урал (CRM + Сайт) * * ЕДИНСТВЕННЫЙ источник цветовых/типографических литералов для сайта и CRM. * Значения синхронизированы 1:1 с утверждённым слоем CRM (crm/tokens.css). * * Подключение: * - витрина сайта: page-templates/portal-styleguide.php () * - Фаза 3/4: crm/tokens.css и assets/css/tokens.css делегируют сюда через var(--ds-*) * * Контракт и фазы: docs/DS-ARCHITECTURE.md * Правило: HEX/RGB ниже — единственное разрешённое место. В правилах — только var(--ds-*). */ :root { /* ========================================================================== 1. ПАЛИТРА И ЦВЕТОВЫЕ РОЛИ ========================================================================== */ /* --- Базовые нейтрали (Ink & Canvas) --- */ --ds-canvas: #F5F7FC; --ds-canvas-subtle: #EDF1F8; --ds-ink-950: #23232F; --ds-ink-900: #2E2E3D; --ds-ink-700: #55556B; --ds-ink-500: #666679; --ds-ink-400: #6E6E85; --ds-ink-300: #9898AA; --ds-ink-200: #C4C4D4; --ds-ink-100: #E6E6F0; /* --- Фирменная синяя семья (Brand Core) --- */ --ds-brand-deep: #08569F; --ds-brand: #0A6DD1; --ds-brand-hi: #2F86DE; --ds-brand-soft: rgba(10, 109, 209, 0.14); --ds-brand-soft-strong: rgba(10, 109, 209, 0.22); --ds-brand-wash: rgba(10, 109, 209, 0.08); --ds-brand-line: rgba(10, 109, 209, 0.25); --ds-brand-gradient: linear-gradient(150deg, var(--ds-brand-hi) 0%, var(--ds-brand-deep) 100%); /* --- Пастельный спектр (Pastel Spectrum) --- */ /* 1. Лаванда-синий (Lav) */ --ds-lav: #4E86E8; --ds-lav-hover: #3E79DF; --ds-lav-soft: rgba(78, 134, 232, 0.14); --ds-lav-line: rgba(78, 134, 232, 0.28); --ds-lav-wash: rgba(78, 134, 232, 0.10); --ds-lav-ink: #0A579F; /* 2. Циан / Небесный (Sky) */ --ds-sky: #43B7D8; --ds-sky-deep: #2F9DBE; --ds-sky-soft: rgba(67, 183, 216, 0.16); --ds-sky-line: rgba(67, 183, 216, 0.30); --ds-sky-wash: rgba(67, 183, 216, 0.10); --ds-sky-ink: #1B6E86; /* 3. Персиковый (Peach) */ --ds-peach: #F0A184; --ds-peach-hi: #F5B79B; --ds-peach-soft: rgba(240, 161, 132, 0.20); --ds-peach-line: rgba(240, 161, 132, 0.36); --ds-peach-wash: rgba(240, 161, 132, 0.12); --ds-peach-ink: #9C4F2C; --ds-peach-ink-soft: #A2552F; /* 4. Мятный (Mint) */ --ds-mint: #5FCBA0; --ds-mint-soft: rgba(95, 203, 160, 0.18); --ds-mint-line: rgba(95, 203, 160, 0.34); --ds-mint-wash: rgba(95, 203, 160, 0.10); --ds-mint-ink: #1B7355; --ds-mint-ink-soft: #1B7355; /* 5. Кораллово-розовый (Rose) */ --ds-rose: #EE7B8C; --ds-rose-soft: rgba(238, 123, 140, 0.18); --ds-rose-line: rgba(238, 123, 140, 0.32); --ds-rose-wash: rgba(238, 123, 140, 0.10); --ds-rose-ink: #AE3B50; /* 6. Нейтральный (Neutral) */ --ds-neutral-soft: rgba(110, 110, 133, 0.14); --ds-neutral-line: rgba(110, 110, 133, 0.24); --ds-neutral-wash-08: rgba(110, 110, 133, 0.08); --ds-neutral-ink: var(--ds-ink-500); /* --- Белые слои и полупрозрачность --- */ --ds-white: #FFFFFF; --ds-white-95: rgba(255, 255, 255, 0.95); --ds-white-90: rgba(255, 255, 255, 0.90); --ds-white-85: rgba(255, 255, 255, 0.85); --ds-white-75: rgba(255, 255, 255, 0.75); --ds-white-72: rgba(255, 255, 255, 0.72); --ds-white-70: rgba(255, 255, 255, 0.70); --ds-white-62: rgba(255, 255, 255, 0.62); --ds-white-60: rgba(255, 255, 255, 0.60); --ds-white-50: rgba(255, 255, 255, 0.50); --ds-white-40: rgba(255, 255, 255, 0.40); /* ========================================================================== 2. ПОВЕРХНОСТИ И СТЕКЛО (SURFACES & GLASS) ========================================================================== */ --ds-surface: var(--ds-white-72); --ds-surface-solid: var(--ds-white); --ds-surface-elevated: var(--ds-white-90); --ds-surface-active: var(--ds-white-85); --ds-surface-subtle: var(--ds-white-60); --ds-card-bg: var(--ds-white-72); --ds-side-bg: var(--ds-white-62); --ds-topbar-bg: rgba(246, 245, 250, 0.75); --ds-tabbar-bg: rgba(255, 255, 255, 0.88); --ds-overlay-scrim: rgba(35, 35, 47, 0.44); /* Триады для scrim-градиентов поверх фото (mobile hero). Значение = --ds-ink-950 */ --ds-scrim-rgb: 35 35 47; --ds-brand-deep-rgb: 8 86 159; /* = --ds-brand-deep */ /* Блюры */ --ds-blur-card: blur(20px) saturate(140%); --ds-blur-side: blur(22px) saturate(150%); --ds-blur-topbar: blur(18px) saturate(140%); --ds-blur-tabbar: blur(20px) saturate(140%); --ds-blur-modal: blur(24px) saturate(140%); /* ========================================================================== 3. РАЗДЕЛИТЕЛИ И БОРДЮРЫ (HAIRLINES & BORDERS) ========================================================================== */ --ds-hair: rgba(70, 70, 120, 0.07); --ds-hair-strong: rgba(70, 70, 120, 0.14); --ds-hair-subtle: rgba(70, 70, 120, 0.04); --ds-card-border: var(--ds-white-85); --ds-border-focus: var(--ds-brand); --ds-border-invalid: var(--ds-rose); /* Glass Rim (внутренний световой рефлекс по верхней кромке) */ --ds-glass-rim: inset 0 1px 1px 0 rgba(255, 255, 255, 0.90); /* ========================================================================== 4. РАДИУСЫ СКРУГЛЕНИЯ (CORNER RADII) ========================================================================== */ --ds-r-xl: 30px; --ds-r-lg: 26px; --ds-r-md: 18px; --ds-r-sm: 13px; --ds-r-xs: 8px; --ds-r-pill: 20px; --ds-r-full: 50%; /* ========================================================================== 5. ТЕНИ (SHADOW RECIPES) ========================================================================== */ --ds-shadow-soft: 0 2px 6px rgba(90, 90, 140, 0.04), 0 20px 44px -26px rgba(90, 90, 140, 0.28); --ds-shadow-hover: 0 4px 10px rgba(90, 90, 140, 0.06), 0 30px 56px -28px rgba(90, 90, 140, 0.36); --ds-shadow-side: 0 0 40px -20px rgba(90, 90, 140, 0.30); --ds-shadow-modal: 0 10px 30px -10px rgba(35, 35, 47, 0.20), 0 30px 70px -20px rgba(90, 90, 140, 0.40); --ds-shadow-dropdown: 0 4px 14px -2px rgba(90, 90, 140, 0.12), 0 16px 36px -12px rgba(90, 90, 140, 0.25); --ds-shadow-toggle: 0 4px 12px -4px rgba(10, 109, 209, 0.35); --ds-shadow-btn-primary: 0 8px 18px -8px rgba(10, 109, 209, 0.75); --ds-shadow-btn-primary-hover: 0 10px 22px -6px rgba(10, 109, 209, 0.85); --ds-shadow-focus-soft: 0 4px 12px -4px rgba(10, 109, 209, 0.45); --ds-shadow-deep-focus: 0 12px 24px -14px rgba(10, 60, 130, 0.25); --ds-shadow-xxs: 0 1px 3px rgba(90, 90, 140, 0.04); --ds-shadow-xs: 0 2px 6px rgba(90, 90, 140, 0.08); --ds-shadow-black-hair: 0 1px 1px rgba(0, 0, 0, 0.05); /* ========================================================================== 6. ТИПОГРАФИКА (TYPOGRAPHY) ========================================================================== */ --ds-font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ds-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ds-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --ds-fs-display: clamp(1.375rem, 0.9rem + 1.4vw, 2.125rem); /* 22px – 34px */ --ds-fs-kpi: clamp(1.75rem, 1.3rem + 1.6vw, 2.125rem); /* 28px – 34px */ --ds-fs-h1: clamp(1.125rem, 0.95rem + 0.7vw, 1.25rem); /* 18px – 20px */ --ds-fs-h2: clamp(0.9375rem, 0.9rem + 0.35vw, 1.0625rem); /* 15px – 17px */ --ds-fs-body: 0.90625rem; /* 14.5px */ --ds-fs-sm: 0.84375rem; /* 13.5px */ --ds-fs-xs: 0.71875rem; /* 11.5px */ --ds-fs-2xs: 0.65625rem; /* 10.5px */ --ds-fs-kicker: 0.59375rem; /* 9.5px */ --ds-lh-tight: 1.00; --ds-lh-title: 1.15; --ds-lh-snug: 1.30; --ds-lh-body: 1.55; --ds-lh-ui: 1.20; --ds-track-tightest: -0.030em; --ds-track-tight: -0.020em; --ds-track-snug: -0.010em; --ds-track-normal: 0em; --ds-track-wide: 0.020em; --ds-track-caps: 0.140em; --ds-fw-light: 300; --ds-fw-regular: 400; --ds-fw-medium: 500; --ds-fw-semibold: 600; --ds-fw-bold: 700; /* ========================================================================== 7. ОТСТУПЫ И СПЕЙСИНГ (SPACING SCALE) ========================================================================== */ --ds-sp-1: 4px; --ds-sp-2: 8px; --ds-sp-3: 12px; --ds-sp-4: 16px; --ds-sp-5: 20px; --ds-sp-6: 24px; --ds-sp-7: 32px; --ds-sp-8: 40px; --ds-sp-9: 48px; --ds-sp-10: 64px; /* ========================================================================== 8. MOTION & ИЗИНГИ ========================================================================== */ --ds-ease: cubic-bezier(0.22, 1, 0.36, 1); --ds-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ds-spring: cubic-bezier(0.34, 1.28, 0.52, 1); --ds-dur-instant: 100ms; --ds-dur-fast: 160ms; --ds-dur-norm: 250ms; --ds-dur-slow: 400ms; --ds-dur-enter: 550ms; --ds-dur-chart: 1300ms; --ds-dur-spark: 1700ms; /* ========================================================================== 9. Z-INDEX ИЕРАРХИЯ ========================================================================== */ --ds-z-backdrop: -1; --ds-z-base: 1; --ds-z-sticky: 10; --ds-z-rail: 40; --ds-z-topbar: 45; --ds-z-tabbar: 50; --ds-z-drawer: 80; --ds-z-scrim: 85; --ds-z-modal: 90; --ds-z-palette: 95; --ds-z-toast: 100; --ds-z-tooltip: 110; /* ========================================================================== 10. СЕМАНТИЧЕСКИЕ СТАТУСЫ ========================================================================== */ --ds-status-pos-bg: var(--ds-mint-soft); --ds-status-pos-ink: var(--ds-mint-ink); --ds-status-pos-line: var(--ds-mint-line); --ds-status-pos-dot: var(--ds-mint); --ds-status-warm-bg: var(--ds-peach-soft); --ds-status-warm-ink: var(--ds-peach-ink); --ds-status-warm-line: var(--ds-peach-line); --ds-status-warm-dot: var(--ds-peach); --ds-status-crit-bg: var(--ds-rose-soft); --ds-status-crit-ink: var(--ds-rose-ink); --ds-status-crit-line: var(--ds-rose-line); --ds-status-crit-dot: var(--ds-rose); --ds-status-neu-bg: var(--ds-neutral-soft); --ds-status-neu-ink: var(--ds-ink-500); --ds-status-neu-line: var(--ds-neutral-line); --ds-status-neu-dot: var(--ds-ink-400); --ds-status-accent-bg: var(--ds-sky-soft); --ds-status-accent-ink: var(--ds-sky-ink); --ds-status-accent-line: var(--ds-sky-line); --ds-status-accent-dot: var(--ds-sky); /* ========================================================================== 11. ГРАДИЕНТНЫЕ ЗАЛИВКИ KPI И КОЛЬЦА ========================================================================== */ --ds-kpi-sky-wash: linear-gradient(155deg, rgba(67, 183, 216, 0.26) 0%, rgba(67, 183, 216, 0.10) 100%); --ds-kpi-lav-wash: linear-gradient(155deg, rgba(78, 134, 232, 0.26) 0%, rgba(78, 134, 232, 0.10) 100%); --ds-kpi-peach-wash: linear-gradient(155deg, rgba(240, 161, 132, 0.30) 0%, rgba(240, 161, 132, 0.12) 100%); --ds-kpi-mint-wash: linear-gradient(155deg, rgba(95, 203, 160, 0.26) 0%, rgba(95, 203, 160, 0.10) 100%); --ds-kpi-rose-wash: linear-gradient(155deg, rgba(238, 123, 140, 0.28) 0%, rgba(238, 123, 140, 0.12) 100%); --ds-ring-track: rgba(78, 134, 232, 0.13); --ds-ring-ghost: rgba(78, 134, 232, 0.08); /* Заливки стадий воронки */ --ds-funnel-new: linear-gradient(90deg, rgba(67, 183, 216, 0.9), rgba(67, 183, 216, 0.6)); --ds-funnel-prog: linear-gradient(90deg, rgba(78, 134, 232, 0.9), rgba(78, 134, 232, 0.6)); --ds-funnel-neg: linear-gradient(90deg, rgba(240, 161, 132, 0.9), rgba(240, 161, 132, 0.6)); --ds-funnel-won: linear-gradient(90deg, rgba(95, 203, 160, 0.9), rgba(95, 203, 160, 0.6)); --ds-funnel-lost: linear-gradient(90deg, rgba(166, 166, 188, 0.8), rgba(166, 166, 188, 0.5)); /* ========================================================================== 12. КАРКАС И МЕТРИКИ (SHELL METRICS) ========================================================================== */ --ds-rail: 78px; --ds-panel: 248px; --ds-topbar-h: 64px; --ds-tabbar-h: 60px; --ds-content-max: 1760px; --ds-content-narrow: 1280px; /* ========================================================================== 13. АТМОСФЕРНЫЙ ФОН ========================================================================== */ --ds-bg-gradient: radial-gradient(52% 44% at 6% 2%, rgba(10, 109, 209, 0.16) 0%, transparent 60%), radial-gradient(46% 40% at 98% 8%, rgba(63, 184, 206, 0.16) 0%, transparent 58%), radial-gradient(44% 40% at 88% 98%, rgba(240, 161, 132, 0.20) 0%, transparent 60%), linear-gradient(160deg, #F2F5FB 0%, #EDF3FA 52%, #F7F1EE 100%); /* ========================================================================== 14. ЧАТ-ТОКЕНЫ ========================================================================== */ --ds-chat-bubble-in-bg: var(--ds-white); --ds-chat-bubble-in-ink: var(--ds-ink-950); --ds-chat-bubble-own-bg: var(--ds-brand-soft); --ds-chat-bubble-own-ink:var(--ds-ink-950); --ds-chat-meta-ink: var(--ds-ink-400); --ds-chat-meta-own-ink: var(--ds-lav-ink); --ds-chat-check-ink: var(--ds-brand); } /* ========================================================================== КАНОНИЧЕСКИЕ БРЕЙКПОИНТЫ (КОНТРАКТ АДАПТИВА) Медиазапросы разрешены ТОЛЬКО по этим порогам: 2560 / 1920 / 1440 / 1280 / 1024 / 820 / 640 / 480 / 390 / 320 ========================================================================== */