/* * Liquid Glass Design System * Glassmorphism-тема в стиле Apple (2025) * Поддержка темной и светлой темы */ @import url('../../lib/chat/chat-tokens.css'); @import url('../fonts/platform-fonts.css'); :root { /* ========== RESPONSIVE BREAKPOINTS ========== */ --breakpoint-mobile: 480px; --breakpoint-tablet: 768px; --breakpoint-desktop: 1024px; --breakpoint-wide: 1440px; /* iOS/Android вырезы; с meta viewport-fit=cover */ --platform-safe-top: env(safe-area-inset-top, 0px); --platform-safe-right: env(safe-area-inset-right, 0px); --platform-safe-bottom: env(safe-area-inset-bottom, 0px); --platform-safe-left: env(safe-area-inset-left, 0px); /* Липкая полоса мобильного хедера: page-header, sync-chat-header (ширина <= 767px) */ --platform-mobile-sticky-header-z-index: 30; --platform-mobile-sticky-header-padding-top: max(var(--space-2), var(--platform-safe-top)); --platform-mobile-sticky-header-padding-bottom: var(--space-2); --platform-mobile-sticky-header-padding-right: max(var(--space-3), env(safe-area-inset-right, 0px)); --platform-mobile-sticky-header-padding-left: max(var(--space-3), env(safe-area-inset-left, 0px)); --platform-mobile-sticky-header-row-min-height: 44px; /* Mobile shell 2026 — platform-bottom-nav (Liquid Glass капсула, <= 767px) */ --platform-bottom-nav-height: 64px; --platform-bottom-nav-inset: var(--space-4); --platform-bottom-nav-radius: var(--radius-2xl); --platform-bottom-nav-z-index: 25; --platform-bottom-nav-tap-target: 48px; /* Mobile shell 2026 — platform-top-bar (Liquid Glass липкая полоса сверху) */ --platform-top-bar-height: 52px; --platform-top-bar-z-index: 24; /* Mobile shell 2026 — platform-bottom-sheet (выше bottom-nav, ниже modal-portal) */ --platform-bottom-sheet-radius: var(--radius-3xl); --platform-bottom-sheet-z-index: 1010; --platform-bottom-sheet-scrim: rgba(0, 0, 0, 0.45); /* * Нижний padding контента на мобиле, чтобы плавающая капсула bottom-nav * не перекрывала последние элементы (списки, FAB). * Сервисные страницы навешивают это значение на корневой контейнер. */ --app-content-bottom-padding-mobile: calc( var(--platform-bottom-nav-height) + var(--platform-bottom-nav-inset) * 2 + var(--platform-safe-bottom) ); /* ========== ЦВЕТОВАЯ ПАЛИТРА ========== */ /* Основной фон с градиентом */ --bg-gradient: linear-gradient( 135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #1a1a2e 75%, #16213e 100% ); /* Фоновые цвета */ --bg-primary: #16213e; --bg-secondary: #1a1a2e; --bg-tertiary: #1e2a47; --bg-elevated: #253659; --bg-surface: #1e2a47; /* ========== GLASS MORPHISM ========== */ /* Glass уровни прозрачности */ --glass-tint-subtle: rgba(255, 255, 255, 0.03); --glass-tint-medium: rgba(255, 255, 255, 0.05); --glass-tint-strong: rgba(255, 255, 255, 0.08); /* Glass фоны с градиентом для глубины */ --glass-bg-subtle: linear-gradient( 135deg, rgba(32, 32, 48, 0.6) 0%, rgba(24, 24, 40, 0.8) 100% ); --glass-bg-medium: linear-gradient( 135deg, rgba(40, 40, 60, 0.7) 0%, rgba(30, 30, 50, 0.85) 100% ); --glass-bg-strong: linear-gradient( 135deg, rgba(45, 45, 70, 0.85) 0%, rgba(35, 35, 55, 0.95) 100% ); /* Сплошные glass-фоны (для backdrop-filter) */ --glass-solid-subtle: rgba(28, 28, 46, 0.75); --glass-solid-medium: rgba(35, 35, 55, 0.85); --glass-solid-strong: rgba(40, 40, 64, 0.92); /* Blur уровни */ --glass-blur-subtle: 20px; --glass-blur-medium: 40px; --glass-blur-strong: 60px; --glass-blur-ultra: 80px; /* Glass границы с свечением */ --glass-border-subtle: rgba(255, 255, 255, 0.08); --glass-border-medium: rgba(255, 255, 255, 0.12); --glass-border-strong: rgba(255, 255, 255, 0.18); --glass-border-glow: rgba(255, 255, 255, 0.25); /* Внутреннее свечение (top highlight) */ --glass-inner-glow-subtle: inset 0 1px 0 rgba(255, 255, 255, 0.06); --glass-inner-glow-medium: inset 0 1px 0 rgba(255, 255, 255, 0.1); --glass-inner-glow-strong: inset 0 1px 1px rgba(255, 255, 255, 0.15); /* Glass тени (многослойные для глубины) */ --glass-shadow-subtle: 0 4px 16px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.1); --glass-shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2); --glass-shadow-strong: 0 16px 48px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.25); --glass-shadow-ultra: 0 24px 80px rgba(0, 0, 0, 0.5), 0 8px 32px rgba(0, 0, 0, 0.3); /* ========== АКЦЕНТНЫЕ ЦВЕТА ========== */ /* Основной акцент (violet) */ --accent: #99A6F9; --accent-hover: #8794F0; --accent-active: #7682E0; --accent-subtle: rgba(153, 166, 249, 0.15); --accent-glow: 0 0 24px rgba(153, 166, 249, 0.4); --accent-gradient: linear-gradient(258.06deg, #FAD17A 13.41%, #FF9A76 50.99%, #99A6F9 95.5%); /* WorkItem semantic tokens (cross-service badge/preview) */ --work-item-priority-low: var(--text-tertiary); --work-item-priority-normal: var(--accent); --work-item-priority-high: var(--warning); --work-item-priority-urgent: var(--error); --work-item-state-open: #94a3b8; --work-item-state-open-subtle: rgba(148, 163, 184, 0.18); --work-item-state-in_progress: var(--accent); --work-item-state-in_progress-subtle: var(--accent-subtle); --work-item-state-active: var(--work-item-state-in_progress); --work-item-state-blocked: var(--warning); --work-item-state-blocked-subtle: rgba(245, 158, 11, 0.18); --work-item-state-done: var(--success); --work-item-state-done-subtle: rgba(16, 185, 129, 0.18); --work-item-state-cancelled: var(--text-tertiary); --work-item-state-cancelled-subtle: rgba(255, 255, 255, 0.08); --work-item-state-failed: var(--error); --work-item-state-failed-subtle: rgba(244, 63, 94, 0.18); --work-item-kind-generic: var(--text-secondary); --work-item-kind-operator: var(--accent-secondary); --work-item-kind-agent: var(--accent-tertiary); --work-item-kind-crm: var(--accent); /* Worktracker layout & density */ --worktracker-page-max-width: 1120px; --worktracker-inspector-width: 300px; --worktracker-panel-width: min(440px, 42vw); --worktracker-row-min-height: 44px; --worktracker-row-padding-x: var(--space-3); --worktracker-section-gap: var(--space-4); --worktracker-divider: 1px solid var(--glass-border-subtle); --worktracker-inspector-row-height: 32px; --worktracker-inspector-label-width: 108px; --worktracker-detail-title-size: var(--text-2xl); --worktracker-composer-min-height: 32px; --worktracker-surface-bg: var(--glass-solid-subtle); --worktracker-surface-border: 1px solid var(--glass-border-subtle); --worktracker-surface-radius: var(--radius-lg); --worktracker-surface-padding: var(--space-4); --worktracker-surface-shadow: var(--glass-shadow-subtle); --worktracker-detail-inner-gap: var(--space-3); /* Вторичный акцент (orange) */ --accent-secondary: #FF885C; --accent-secondary-hover: #F2784A; --accent-secondary-subtle: rgba(255, 136, 92, 0.15); --accent-secondary-glow: 0 0 24px rgba(255, 136, 92, 0.4); /* Третичный акцент (фиолетовый) */ --accent-tertiary: #8b5cf6; --accent-tertiary-subtle: rgba(139, 92, 246, 0.15); --accent-quaternary: #f59e0b; --accent-quaternary-subtle: rgba(245, 158, 11, 0.15); /* ========== ТЕКСТ ========== */ --text-primary: rgba(255, 255, 255, 0.95); --text-secondary: rgba(255, 255, 255, 0.65); --text-tertiary: rgba(255, 255, 255, 0.45); --text-disabled: rgba(255, 255, 255, 0.25); --text-inverse: #0f0f1a; /* ========== ГРАНИЦЫ ========== */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); --border-focus: var(--accent); /* ========== PLATFORM DATE PICKER ========== */ --platform-date-picker-popup-bg: var(--glass-solid-strong); --platform-date-picker-popup-border: var(--border-default); --platform-date-picker-day-hover-bg: var(--glass-solid-medium); --platform-date-picker-day-hover-border: var(--border-default); --platform-date-picker-range-bg: var(--accent-subtle); --platform-date-picker-range-text: var(--accent-secondary); /* ========== СОСТОЯНИЯ ========== */ --error: #f43f5e; --error-bg: rgba(244, 63, 94, 0.12); --error-border: rgba(244, 63, 94, 0.3); --error-glow: 0 0 16px rgba(244, 63, 94, 0.3); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.12); --warning-border: rgba(245, 158, 11, 0.3); --success: #10b981; --success-bg: rgba(16, 185, 129, 0.12); --success-border: rgba(16, 185, 129, 0.3); --info: #3b82f6; --info-bg: rgba(59, 130, 246, 0.12); --info-border: rgba(59, 130, 246, 0.3); /* ========== ТИПОГРАФИКА ========== */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --font-feature-sans: 'cv02' 1, 'cv03' 1, 'cv04' 1, 'cv11' 1; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-lg: 1.0625rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --text-display-md: clamp(2.75rem, 5vw, 4.5rem); --text-display-sm: clamp(2rem, 4vw, 2.25rem); --text-section-title: clamp(1.75rem, 3vw, 2.25rem); --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; /* ========== ПРОСТРАНСТВО ========== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* ========== MARKETING / PRODUCT PAGES ========== */ --marketing-page-bg: var(--bg-secondary); --marketing-content-max-width: 75rem; --marketing-narrow-max-width: 50rem; --marketing-section-padding-y: var(--space-16); --marketing-section-padding-x: var(--space-5); --marketing-hero-padding-top: var(--space-16); --marketing-hero-bg: var(--marketing-page-bg); --marketing-hero-title-gradient: linear-gradient( 135deg, var(--text-primary) 0%, var(--text-secondary) 100% ); --marketing-product-accent: var(--accent); --marketing-product-accent-subtle: var(--accent-subtle); --marketing-benefits-band-bg: var(--accent-subtle); --marketing-benefits-band-border: var(--glass-border-subtle); --marketing-shot-radius: var(--radius-xl); --marketing-shot-shadow: var(--glass-shadow-ultra); --marketing-shot-border: var(--glass-border-medium); --marketing-hero-image-filter: drop-shadow(0 0 3.75rem var(--accent-subtle)); --marketing-header-bg: var(--glass-bg-strong); --marketing-footer-bg: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); --marketing-download-icon-windows: #0078d4; --marketing-download-icon-windows-bg: color-mix(in srgb, #0078d4 16%, transparent); --marketing-download-icon-apple: var(--text-primary); --marketing-download-icon-apple-bg: var(--glass-bg-subtle); --marketing-download-icon-ubuntu: #e95420; --marketing-download-icon-ubuntu-bg: color-mix(in srgb, #e95420 16%, transparent); --marketing-download-icon-fedora: #51a2da; --marketing-download-icon-fedora-bg: color-mix(in srgb, #51a2da 16%, transparent); --marketing-download-icon-linux: var(--accent); --marketing-download-icon-linux-bg: var(--accent-subtle); /* ========== РАДИУСЫ ========== */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; /* ========== АНИМАЦИИ ========== */ --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; /* Core motion 2026: браузерная композиция по умолчанию (сначала opacity/transform). */ --motion-duration-micro: 120ms; --motion-duration-enter: 180ms; --motion-duration-exit: 160ms; --motion-duration-layout: 250ms; --motion-duration-loading: 1200ms; --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --motion-ease-decelerate: cubic-bezier(0.22, 1, 0.36, 1); --motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --motion-enter-offset-y: 8px; --motion-exit-offset-y: 8px; --motion-contain-intrinsic-block-size: 480px; --motion-transition-interactive: background-color var(--motion-duration-micro) var(--motion-ease-standard), border-color var(--motion-duration-micro) var(--motion-ease-standard), color var(--motion-duration-micro) var(--motion-ease-standard), box-shadow var(--motion-duration-micro) var(--motion-ease-standard), opacity var(--motion-duration-micro) var(--motion-ease-standard), transform var(--motion-duration-micro) var(--motion-ease-standard); --motion-transition-surface: opacity var(--motion-duration-enter) var(--motion-ease-decelerate), transform var(--motion-duration-enter) var(--motion-ease-decelerate); /* Стабильные дефолты тела модалки. Сервисы могут переопределять --modal-body-min-block-size. */ --platform-modal-sm-body-min-block-size: 0px; --platform-modal-md-body-min-block-size: 6rem; --platform-modal-lg-body-min-block-size: 12rem; --platform-modal-xl-body-min-block-size: 16rem; --platform-modal-full-body-min-block-size: 0px; /* Модальные окна: overlay + панель (glass-modal, modal.styles, кастомные .backdrop/.modal) */ --modal-overlay-duration: var(--motion-duration-enter); --modal-overlay-exit-duration: var(--motion-duration-exit); --modal-panel-duration: var(--motion-duration-enter); --modal-panel-exit-duration: var(--motion-duration-exit); --modal-panel-easing: var(--motion-ease-decelerate); /* Появление панели: мягкое замедление в конце */ --modal-enter-easing: var(--motion-ease-decelerate); --modal-exit-easing: var(--motion-ease-accelerate); --modal-popover-duration: 180ms; --easing-default: cubic-bezier(0.4, 0, 0.2, 1); --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --easing-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ========== Z-INDEX ========== */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 900; --z-modal: 1000; --z-toast: 1100; --z-tooltip: 1200; --z-max: 9999; /* Совпадает с дефолтом platform-notification-manager */ --z-notification-panel: 30000; /* * Портал тултипов CodeMirror (parent=document.body): выше glass-modal * (nextModalLayerZIndex от stackFloor ~ --z-notification-panel) и полноэкранного flows-code-editor (10000). * Односложный calc — без max() внутри calc (совместимость движков). */ --z-editor-body-portal: calc(var(--z-notification-panel) + 10000); /* ========== РАЗМЕРЫ КОМПОНЕНТОВ ========== */ --navbar-width: 380px; --navbar-collapsed-width: 72px; --header-height: 64px; --input-height: 48px; /* ========== FIELD PILL (единый канон инпутов) ========== */ --field-pill-bg: var(--glass-tint-medium); --field-pill-border: var(--border-subtle); --field-pill-radius: 18px; --field-pill-padding-y: 14px; --field-pill-padding-x: 18px; --field-pill-gap: 8px; --field-pill-gap-textarea: 10px; --field-pill-gap-tags: 10px; --field-pill-textarea-min-height: 120px; --field-pill-tag-input-min-width: 140px; --field-pill-label-color: var(--text-secondary); --field-pill-label-size: 11px; --field-pill-label-weight: 600; --field-pill-label-line: 1.1; --field-pill-label-letter: 0.04em; --field-pill-input-color: var(--text-primary); --field-pill-input-size: 17px; --field-pill-input-weight: 600; --field-pill-input-line: 1.45; --field-pill-readonly-muted-size: 14px; --field-pill-muted-color: var(--text-tertiary); --field-pill-hint-color: var(--text-tertiary); --field-pill-hint-size: var(--text-xs); --field-pill-tag-chip-bg: var(--glass-tint-strong); --field-pill-tag-count-bg: var(--accent-subtle); --field-pill-tag-count-color: var(--accent); --field-pill-tag-count-size: 12px; /* Компактная плашка (сайдбар namespace, узкие строки) */ --field-pill-compact-padding-y: 6px; --field-pill-compact-padding-x: 12px; --field-pill-compact-radius: var(--radius-md); --field-pill-compact-gap: 4px; --field-pill-compact-input-size: var(--text-sm); --field-pill-compact-input-weight: var(--font-medium); --field-pill-compact-select-chevron-padding-end: 22px; /* Плашка dense: узкая строка в шапке sidebar (выбор namespace) — ниже compact */ --field-pill-dense-padding-y: 3px; --field-pill-dense-padding-x: 10px; --field-pill-dense-spin-height: 28px; --field-attr-row-gap: var(--space-2); /* Числовое поле (platform-field-number): колонка шагов вместо нативных стрелок */ --field-pill-number-gap: var(--space-2); --field-pill-number-spin-width: 30px; /* Высота spin = канон min-height однострочного edit-ряда в `.field-pill-control` (enum, string, number). */ --field-pill-number-spin-height: 40px; --field-pill-number-spin-radius: var(--radius-sm); --field-pill-number-spin-border: var(--glass-border-subtle); --field-pill-number-spin-bg: var(--glass-solid-subtle); --field-pill-number-spin-hover-bg: var(--glass-tint-strong); --field-pill-number-spin-divider: var(--glass-border-subtle); --field-pill-number-spin-icon-color: var(--text-tertiary); --button-height: 44px; --icon-size-sm: 18px; --icon-size-md: 22px; --icon-size-lg: 28px; /* ========== СПЕЦИАЛЬНЫЕ ЭФФЕКТЫ ========== */ /* Hover glow для интерактивных элементов */ --hover-glow: 0 0 0 4px rgba(153, 166, 249, 0.15); --focus-ring: 0 0 0 3px rgba(153, 166, 249, 0.4); /* ========== PLATFORM BUTTON TOKENS ========== */ --btn-radius: 22px; --btn-padding: 8px 24px; --btn-font-size: 16px; --btn-line-height: 20px; --btn-font-weight: 400; --platform-btn-primary-bg: var(--accent); --platform-btn-primary-bg-hover: var(--accent-hover); --platform-btn-primary-text: #ffffff; --platform-btn-primary-border: var(--accent); --platform-btn-primary-border-hover: var(--accent-hover); --platform-btn-primary-shadow: none; --platform-btn-primary-shadow-hover: 0 0 10px rgba(153, 166, 249, 0.6); --platform-btn-accent-bg: var(--accent-secondary); --platform-btn-accent-bg-hover: var(--accent-secondary-hover); --platform-btn-accent-text: #ffffff; --platform-btn-accent-border: var(--accent-secondary); --platform-btn-accent-border-hover: var(--accent-secondary-hover); --platform-btn-accent-shadow: none; --platform-btn-accent-shadow-hover: 0 0 10px rgba(255, 136, 92, 0.6); --platform-btn-secondary-bg: rgba(153, 166, 249, 0.15); --platform-btn-secondary-bg-hover: rgba(153, 166, 249, 0.1); --platform-btn-secondary-text: var(--accent); --platform-btn-secondary-border: transparent; --platform-btn-secondary-border-hover: transparent; --platform-btn-secondary-shadow: none; --platform-btn-secondary-shadow-hover: 0 0 10px rgba(153, 166, 249, 0.2); --platform-btn-accent-secondary-bg: rgba(255, 136, 92, 0.15); --platform-btn-accent-secondary-bg-hover: rgba(255, 136, 92, 0.1); --platform-btn-accent-secondary-text: #FF9A76; --platform-btn-accent-secondary-shadow-hover: 0 0 10px rgba(255, 136, 92, 0.2); /* ========== CRM SEMANTIC TOKENS ========== */ --crm-surface: var(--glass-solid-medium); --crm-surface-muted: var(--glass-solid-subtle); --crm-surface-elevated: var(--glass-solid-strong); --crm-surface-tint: var(--glass-tint-subtle); --crm-surface-tint-strong: var(--glass-tint-medium); --crm-stroke: var(--glass-border-subtle); --crm-stroke-strong: var(--glass-border-medium); --crm-selected-bg: rgba(153, 166, 249, 0.2); --crm-selected-stroke: var(--crm-button-primary-bg); --crm-selected-text: var(--crm-button-primary-bg); --crm-info-bg: rgba(59, 130, 246, 0.12); --crm-info-stroke: rgba(59, 130, 246, 0.28); --crm-info-text: #60a5fa; --crm-danger-bg: rgba(244, 63, 94, 0.12); --crm-danger-stroke: rgba(244, 63, 94, 0.28); --crm-nav-notes-gradient: linear-gradient(145deg, #ffd60a 0%, #ff9500 100%); --crm-nav-notes-shadow: 0 2px 8px rgba(255, 149, 0, 0.3); --crm-nav-entities-gradient: linear-gradient(145deg, #5ac8fa 0%, #007aff 100%); --crm-nav-entities-shadow: 0 2px 8px rgba(0, 122, 255, 0.3); --crm-nav-graph-gradient: linear-gradient(145deg, #af52de 0%, #5856d6 100%); --crm-nav-graph-shadow: 0 2px 8px rgba(88, 86, 214, 0.3); --crm-nav-tasks-gradient: linear-gradient(145deg, #34c759 0%, #30d158 100%); --crm-nav-tasks-shadow: 0 2px 8px rgba(52, 199, 89, 0.3); --crm-nav-calendar-gradient: linear-gradient(145deg, #ff3b30 0%, #ff453a 100%); --crm-nav-calendar-shadow: 0 2px 8px rgba(255, 59, 48, 0.3); --crm-daily-notes-cta-bg: #8f9cf6; --crm-daily-notes-cta-hover: #7f8eec; --crm-button-primary-bg: var(--platform-btn-primary-bg); --crm-button-primary-hover: var(--platform-btn-primary-bg-hover); --crm-button-primary-text: var(--platform-btn-primary-text); --crm-button-secondary-bg: var(--platform-btn-accent-bg); --crm-button-secondary-hover: var(--platform-btn-accent-bg-hover); --crm-button-secondary-text: var(--platform-btn-accent-text); --crm-main-gradient: var(--accent-gradient); --crm-summary-bg: rgba(95, 101, 150, 0.26); --crm-summary-stroke: rgba(136, 145, 204, 0.42); --crm-summary-title-gradient: var(--crm-main-gradient); --crm-summary-meta: rgba(255, 255, 255, 0.58); --crm-summary-chip-blue-bg: rgba(126, 142, 255, 0.25); --crm-summary-chip-cyan-bg: rgba(117, 219, 246, 0.28); --crm-summary-chip-orange-bg: rgba(255, 171, 120, 0.3); --crm-summary-chip-rose-bg: rgba(250, 176, 187, 0.32); /* Акценты CRM (палитра Figma) */ --crm-accent-violet: #99A6F9; --crm-accent-yellow: #FAD17A; --crm-accent-orange: #FF885C; /* CRM note view (dark — приглушённые оттенки) */ --crm-note-summary-bg: rgba(153, 166, 249, 0.18); --crm-note-tasks-bg: rgba(255, 255, 255, 0.05); --crm-note-related-violet-bg: rgba(153, 166, 249, 0.18); --crm-note-related-yellow-bg: rgba(250, 209, 122, 0.22); --crm-note-related-orange-bg: rgba(255, 136, 92, 0.18); --crm-note-action-bg: rgba(255, 255, 255, 0.06); --crm-note-action-bg-hover: rgba(255, 255, 255, 0.1); --crm-note-action-orange-bg: rgba(255, 136, 92, 0.22); --crm-note-action-orange-color: var(--accent-secondary); --crm-note-checkbox-pending-border: rgba(255, 255, 255, 0.18); --crm-note-checkbox-checked-bg: var(--accent); --crm-note-checkbox-checked-mark: #FFFFFF; --crm-note-input-bg: rgba(255, 255, 255, 0.05); --crm-note-text-muted: var(--text-tertiary); --crm-note-text-strikethrough: rgba(255, 255, 255, 0.25); --crm-note-summary-title-gradient: linear-gradient(80.46deg, #FAD17A 9.08%, #FF9A76 44.12%, #99A6F9 85.61%); --crm-note-icon-gradient: linear-gradient(80.46deg, #FAD17A 9.08%, #FF9A76 44.12%, #99A6F9 85.61%); --crm-note-related-icon-gradient: linear-gradient(312.35deg, #FAD17A 18.71%, #FF9A76 82.25%, #99A6F9 157.48%); /* ========== FLOWS SEMANTIC TOKENS ========== */ --flows-cover-gradient-1: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%); --flows-cover-gradient-2: linear-gradient( 135deg, color-mix(in srgb, var(--accent) 72%, var(--info) 28%) 0%, color-mix(in srgb, var(--accent-secondary) 55%, var(--accent) 45%) 100% ); --flows-cover-gradient-3: linear-gradient(135deg, var(--warning) 0%, var(--accent-secondary) 100%); --flows-cover-gradient-4: linear-gradient(135deg, var(--info) 0%, var(--accent) 100%); --flows-cover-gradient-5: linear-gradient( 135deg, color-mix(in srgb, var(--accent-secondary) 65%, var(--accent) 35%) 0%, var(--accent) 100% ); --flows-cover-gradient-6: linear-gradient(135deg, var(--success) 0%, var(--accent) 100%); --flows-cover-gradient-7: linear-gradient(135deg, var(--accent-secondary) 0%, var(--warning) 100%); --flows-cover-gradient-8: linear-gradient( 135deg, color-mix(in srgb, var(--accent) 70%, var(--info) 30%) 0%, color-mix(in srgb, var(--accent) 45%, var(--accent-secondary) 55%) 100% ); --flows-preset-react-gradient: var(--flows-cover-gradient-1); --flows-preset-graph-gradient: var(--flows-cover-gradient-2); --flows-preset-multi-gradient: var(--flows-cover-gradient-4); --flows-preset-code-gradient: var(--flows-cover-gradient-6); --flows-preset-external-gradient: var(--flows-cover-gradient-5); --flows-preset-store-gradient: var(--flows-cover-gradient-4); --flows-lib-kind-flow-gradient: var(--flows-preset-external-gradient); --flows-lib-kind-mcp-gradient: var(--flows-preset-code-gradient); --flows-tool-picker-mcp-panel-height: 420px; --flows-avatar-text: var(--text-inverse); --flows-avatar-shadow: var(--glass-shadow-subtle); --flows-avatar-hover-shadow: var(--glass-shadow-medium); --flows-micro-control-size: 28px; --flows-card-action-size: var(--flows-micro-control-size); --flows-chrome-control-size: 32px; --flows-chrome-row-min-height: 40px; --flows-editor-chrome-row-min-height: var(--flows-chrome-row-min-height); --flows-editor-chrome-gap: var(--space-2); --flows-sidebar-row-min-height: 42px; --flows-side-panel-width: 324px; --flows-side-panel-min-width: 320px; --flows-side-panel-max-width: 400px; --flows-editor-chrome-stack-height: 60px; --flows-toolbar-shell-min-height: 48px; --flows-bundle-update-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 24%, transparent); --flows-canvas-sticky-inset: var(--glass-inner-glow-subtle); --flows-canvas-sticky-surface: color-mix(in oklab, var(--bg-elevated) 90%, var(--sticky-accent) 10%); /* ========== SYNC SEMANTIC TOKENS ========== */ --sync-bubble-own-bg: linear-gradient(135deg, rgba(153, 166, 249, 0.18) 0%, rgba(255, 136, 92, 0.10) 100%); --sync-bubble-own-border: rgba(153, 166, 249, 0.30); --sync-bubble-other-bg: linear-gradient(135deg, rgba(147, 197, 253, 0.22) 0%, rgba(96, 165, 250, 0.14) 100%); --sync-bubble-other-border: rgba(96, 165, 250, 0.24); --sync-bubble-radius: var(--radius-md); --sync-bubble-radius-grouped: 6px; --sync-header-blur: var(--glass-blur-strong); --sync-composer-bg: var(--glass-solid-subtle); --sync-video-radius: var(--radius-lg); --sync-active-row-bg: linear-gradient(135deg, rgba(153, 166, 249, 0.14) 0%, rgba(255, 136, 92, 0.08) 100%); /* ========== DOCUMENTS / OFFICE (dark defaults) ========== */ --documents-gradient: linear-gradient(105deg, #3ec9d8 0%, #6cb1e1 42%, #737ce9 100%); --documents-gradient-hover: linear-gradient(105deg, #48d4e2 0%, #78b9ea 42%, #828df0 100%); --documents-selected-bg: rgba(62, 201, 216, 0.14); --documents-selected-stroke: rgba(115, 124, 233, 0.45); --documents-selected-text: #9eb4ff; --documents-surface-muted: rgba(255, 255, 255, 0.03); --documents-stroke: rgba(100, 170, 215, 0.28); --documents-link-hover: #78b9ea; --documents-btn-shadow: 0 2px 14px rgba(70, 89, 184, 0.18); --documents-btn-shadow-hover: 0 4px 20px rgba(70, 89, 184, 0.28); --documents-explorer-divider: var(--glass-border-subtle); --documents-explorer-toolbar-bg: var(--glass-solid-subtle); --documents-empty-bg: rgba(255, 255, 255, 0.02); --documents-empty-border: rgba(115, 124, 233, 0.35); --documents-explorer-tree-width: 15rem; --documents-explorer-details-width: 20rem; --documents-explorer-table-row-height: 3.25rem; --documents-explorer-grid-min: 11.25rem; --documents-explorer-toolbar-height: 3rem; --documents-explorer-control-height: 2.25rem; --documents-explorer-btn-radius: var(--radius-md); --documents-action-primary: #6284e8; --documents-action-primary-hover: #5678dc; --documents-action-primary-border: rgba(98, 132, 232, 0.45); /* Shimmer эффект для загрузки */ --shimmer-gradient: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100% ); } /* * Flows CodeMirror tooltips (parent #flows-cm-tooltip-mount). Инжект CM (@codemirror/view baseTheme) * часто идёт после tokens.css и перебивает EditorView.theme у портала — задаём оболочку здесь. * !important только на фон/рамку/типографику контейнеров, не на позицию (inline из autocomplete positionInfo). */ #flows-cm-tooltip-mount .cm-tooltip { pointer-events: auto; box-sizing: border-box; } #flows-cm-tooltip-mount .cm-tooltip.cm-tooltip-autocomplete { color: var(--text-primary) !important; border-radius: var(--radius-md) !important; border: 1px solid var(--glass-border-subtle) !important; box-shadow: var(--glass-shadow-strong) !important; background-color: var(--glass-solid-strong) !important; overflow: hidden; } #flows-cm-tooltip-mount .cm-tooltip.cm-tooltip-autocomplete > ul.cm-completionList { margin: 0; padding: var(--space-1) 0; list-style: none; line-height: 1.45; font-family: var(--font-mono); font-size: var(--text-sm); max-height: min(18rem, 55vh); max-width: min(20rem, 92vw); min-width: 11rem; overflow-x: hidden; overflow-y: auto; background-color: var(--glass-solid-strong) !important; } #flows-cm-tooltip-mount .cm-tooltip.cm-tooltip-autocomplete > ul.cm-completionList > li { padding: var(--space-2) var(--space-3); cursor: pointer; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--space-2); overflow: hidden; color: var(--text-primary); } #flows-cm-tooltip-mount .cm-tooltip.cm-tooltip-autocomplete > ul.cm-completionList > li[aria-selected='true'] { background-color: var(--accent-subtle) !important; color: var(--text-primary); } #flows-cm-tooltip-mount .cm-tooltip .cm-completionIcon { flex: 0 0 auto; color: var(--text-tertiary); } #flows-cm-tooltip-mount .cm-tooltip .cm-completionLabel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } #flows-cm-tooltip-mount .cm-tooltip .cm-completionDetail { flex: 0 0 auto; margin-left: auto; padding-left: var(--space-2); max-width: min(48%, 13rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; color: var(--text-tertiary); font-size: 0.85em; } #flows-cm-tooltip-mount .cm-tooltip .cm-completionMatchedText { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; color: var(--accent); } #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo { border-radius: var(--radius-md) !important; color: var(--text-primary) !important; background-color: var(--glass-solid-strong) !important; font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.55; max-width: min(28rem, 92vw); min-width: min(16rem, 100%); width: auto; max-height: min(55vh, 28rem); overflow-x: hidden; overflow-y: auto; padding: var(--space-3) var(--space-4) !important; white-space: pre-wrap; word-break: break-word; border: 1px solid var(--glass-border-subtle) !important; box-shadow: var(--glass-shadow-strong) !important; } #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo.cm-completionInfo-right-narrow, #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo.cm-completionInfo-left-narrow { border-top: 1px solid var(--glass-border-subtle) !important; padding-top: var(--space-3) !important; } #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo code { font-family: var(--font-mono); font-size: 0.88em; font-weight: 500; background: var(--glass-tint-medium); padding: 0.12em 0.4em; border-radius: var(--radius-sm); border: 1px solid var(--glass-border-subtle); } #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo .flows-cm-completion-md { white-space: normal; } #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo .flows-cm-completion-md p { margin: 0 0 var(--space-2); } #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo .flows-cm-completion-md p:last-child { margin-bottom: 0; } #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo .flows-cm-completion-md ul, #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo .flows-cm-completion-md ol { margin: 0 0 var(--space-2); padding-left: var(--space-5); } #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo .flows-cm-completion-md li { margin: 0.2em 0; } #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo .flows-cm-completion-md h1, #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo .flows-cm-completion-md h2, #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo .flows-cm-completion-md h3, #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo .flows-cm-completion-md h4 { margin: var(--space-2) 0 var(--space-1); font-size: 1em; font-weight: 600; } #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo .flows-cm-completion-md pre { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); overflow-x: auto; font-family: var(--font-mono); font-size: 0.85em; line-height: 1.45; background: var(--glass-tint-medium); border-radius: var(--radius-sm); border: 1px solid var(--glass-border-subtle); } #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo .flows-cm-completion-md pre code { padding: 0; background: transparent; border: none; font-size: inherit; font-weight: 400; } #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo .flows-cm-completion-md blockquote { margin: 0 0 var(--space-2); padding-left: var(--space-3); border-left: 3px solid var(--glass-border-subtle); color: var(--text-secondary); } #flows-cm-tooltip-mount .cm-tooltip.cm-completionInfo .flows-cm-completion-md-fallback { margin: 0; font-family: var(--font-mono); font-size: 0.88em; white-space: pre-wrap; } /* ========== СВЕТЛАЯ ТЕМА ========== */ [data-theme="light"] { /* Фоновые цвета */ --bg-gradient: linear-gradient( 135deg, #f8fafc 0%, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%, #f8fafc 100% ); --bg-primary: #f8fafc; --bg-secondary: #f1f5f9; --bg-tertiary: #e2e8f0; --bg-elevated: #ffffff; --bg-surface: #ffffff; /* Glass для светлой темы */ --glass-tint-subtle: rgba(15, 23, 42, 0.02); --glass-tint-medium: rgba(15, 23, 42, 0.04); --glass-tint-strong: rgba(15, 23, 42, 0.06); --glass-bg-subtle: linear-gradient( 135deg, rgba(255, 255, 255, 0.7) 0%, rgba(248, 250, 252, 0.85) 100% ); --glass-bg-medium: linear-gradient( 135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.92) 100% ); --glass-bg-strong: linear-gradient( 135deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.98) 100% ); --glass-solid-subtle: rgba(255, 255, 255, 0.8); --glass-solid-medium: rgba(255, 255, 255, 0.9); --glass-solid-strong: rgba(255, 255, 255, 0.96); --glass-border-subtle: rgba(15, 23, 42, 0.06); --glass-border-medium: rgba(15, 23, 42, 0.1); --glass-border-strong: rgba(15, 23, 42, 0.15); --glass-border-glow: rgba(15, 23, 42, 0.2); --glass-inner-glow-subtle: inset 0 1px 0 rgba(255, 255, 255, 0.9); --glass-inner-glow-medium: inset 0 1px 0 rgba(255, 255, 255, 1); --glass-inner-glow-strong: inset 0 2px 0 rgba(255, 255, 255, 1); --glass-shadow-subtle: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04); --glass-shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); --glass-shadow-strong: 0 16px 48px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.06); --glass-shadow-ultra: 0 24px 80px rgba(0, 0, 0, 0.12), 0 8px 32px rgba(0, 0, 0, 0.08); /* Текст для светлой темы */ --text-primary: rgba(15, 23, 42, 0.95); --text-secondary: rgba(15, 23, 42, 0.65); --text-tertiary: rgba(15, 23, 42, 0.45); --text-disabled: rgba(15, 23, 42, 0.25); --text-inverse: #ffffff; /* Границы для светлой темы */ --border-subtle: rgba(15, 23, 42, 0.06); --border-default: rgba(15, 23, 42, 0.1); --border-strong: rgba(15, 23, 42, 0.15); --platform-date-picker-popup-bg: var(--glass-solid-strong); --platform-date-picker-popup-border: var(--border-default); --platform-date-picker-day-hover-bg: var(--glass-solid-medium); --platform-date-picker-day-hover-border: var(--border-default); --platform-date-picker-range-bg: var(--accent-subtle); --platform-date-picker-range-text: var(--accent-secondary); /* Mobile shell 2026 — scrim для bottom-sheet (светлая тема) */ --platform-bottom-sheet-scrim: rgba(15, 23, 42, 0.32); /* Акценты для светлой темы */ --accent: #8794F0; --accent-hover: #99A6F9; --accent-subtle: rgba(135, 148, 240, 0.12); --accent-glow: 0 0 24px rgba(135, 148, 240, 0.25); --accent-secondary: #F2784A; --accent-secondary-hover: #FF885C; --accent-secondary-subtle: rgba(242, 120, 74, 0.12); --accent-quaternary-subtle: rgba(245, 158, 11, 0.12); /* WorkItem semantic tokens (light theme) */ --work-item-state-open: #64748b; --work-item-state-open-subtle: rgba(100, 116, 139, 0.12); --work-item-state-in_progress: var(--accent); --work-item-state-in_progress-subtle: var(--accent-subtle); --work-item-state-active: var(--work-item-state-in_progress); --work-item-state-blocked: #d97706; --work-item-state-blocked-subtle: rgba(217, 119, 6, 0.12); --work-item-state-done: #059669; --work-item-state-done-subtle: rgba(5, 150, 105, 0.12); --work-item-state-cancelled: var(--text-tertiary); --work-item-state-cancelled-subtle: rgba(15, 23, 42, 0.06); --work-item-state-failed: #e11d48; --work-item-state-failed-subtle: rgba(225, 29, 72, 0.1); /* Worktracker layout & density (light theme) */ --worktracker-page-max-width: 1120px; --worktracker-inspector-width: 300px; --worktracker-panel-width: min(440px, 42vw); --worktracker-row-min-height: 44px; --worktracker-row-padding-x: var(--space-3); --worktracker-section-gap: var(--space-4); --worktracker-divider: 1px solid var(--glass-border-subtle); --worktracker-inspector-row-height: 32px; --worktracker-inspector-label-width: 108px; --worktracker-detail-title-size: var(--text-2xl); --worktracker-composer-min-height: 32px; --worktracker-surface-bg: var(--glass-solid-subtle); --worktracker-surface-border: 1px solid var(--glass-border-subtle); --worktracker-surface-radius: var(--radius-lg); --worktracker-surface-padding: var(--space-4); --worktracker-surface-shadow: var(--glass-shadow-subtle); --worktracker-detail-inner-gap: var(--space-3); --marketing-page-bg: #f7f8fc; --marketing-hero-bg: radial-gradient(circle at 50% 18%, var(--accent-subtle), transparent 36%), linear-gradient(180deg, #ffffff 0%, #f7f8fc 56%, #eef1fa 100%); --marketing-hero-image-filter: drop-shadow(0 1.5rem 3.75rem var(--accent-subtle)); --marketing-header-bg: var(--glass-bg-strong); --marketing-footer-bg: linear-gradient(180deg, #f7f8fc 0%, #eceff8 100%); --marketing-benefits-band-bg: var(--accent-subtle); /* Семантические токены Sync (светлая тема) */ --sync-bubble-own-bg: linear-gradient(135deg, rgba(153, 166, 249, 0.22) 0%, rgba(135, 148, 240, 0.14) 100%); --sync-bubble-own-border: rgba(135, 148, 240, 0.25); --sync-bubble-other-bg: linear-gradient(135deg, rgba(219, 234, 254, 0.85) 0%, rgba(191, 219, 254, 0.65) 100%); --sync-bubble-other-border: rgba(59, 130, 246, 0.22); --sync-composer-bg: rgba(255, 255, 255, 0.85); --sync-active-row-bg: linear-gradient(135deg, rgba(153, 166, 249, 0.15) 0%, rgba(135, 148, 240, 0.08) 100%); /* Shimmer для светлой темы */ --shimmer-gradient: linear-gradient( 90deg, transparent 0%, rgba(0, 0, 0, 0.04) 50%, transparent 100% ); --crm-surface: var(--glass-solid-medium); --crm-surface-muted: var(--glass-solid-subtle); --crm-surface-elevated: var(--glass-solid-strong); --crm-surface-tint: var(--glass-tint-subtle); --crm-surface-tint-strong: var(--glass-tint-medium); --crm-stroke: var(--glass-border-subtle); --crm-stroke-strong: var(--glass-border-medium); --crm-selected-bg: rgba(153, 166, 249, 0.26); --crm-selected-stroke: var(--crm-button-primary-bg); --crm-selected-text: #6f7ee8; --field-pill-label-color: var(--text-secondary); --field-pill-hint-color: var(--text-secondary); --field-pill-muted-color: var(--text-secondary); --field-pill-tag-count-color: var(--crm-selected-text); --crm-info-bg: rgba(59, 130, 246, 0.1); --crm-info-stroke: rgba(59, 130, 246, 0.22); --crm-info-text: #2563eb; --crm-danger-bg: rgba(244, 63, 94, 0.08); --crm-danger-stroke: rgba(244, 63, 94, 0.2); --crm-nav-notes-gradient: linear-gradient(145deg, #facc15 0%, #f59e0b 100%); --crm-nav-notes-shadow: 0 2px 8px rgba(245, 158, 11, 0.28); --crm-nav-entities-gradient: linear-gradient(145deg, #38bdf8 0%, #3b82f6 100%); --crm-nav-entities-shadow: 0 2px 8px rgba(59, 130, 246, 0.28); --crm-nav-graph-gradient: linear-gradient(145deg, #a78bfa 0%, #6366f1 100%); --crm-nav-graph-shadow: 0 2px 8px rgba(99, 102, 241, 0.28); --crm-nav-tasks-gradient: linear-gradient(145deg, #22c55e 0%, #16a34a 100%); --crm-nav-tasks-shadow: 0 2px 8px rgba(34, 197, 94, 0.28); --crm-nav-calendar-gradient: linear-gradient(145deg, #f87171 0%, #ef4444 100%); --crm-nav-calendar-shadow: 0 2px 8px rgba(239, 68, 68, 0.28); --crm-daily-notes-cta-bg: #8f9cf6; --crm-daily-notes-cta-hover: #7f8eec; --crm-button-primary-bg: var(--platform-btn-primary-bg); --crm-button-primary-hover: var(--platform-btn-primary-bg-hover); --crm-button-primary-text: var(--platform-btn-primary-text); --crm-button-secondary-bg: var(--platform-btn-accent-bg); --crm-button-secondary-hover: var(--platform-btn-accent-bg-hover); --crm-button-secondary-text: var(--platform-btn-accent-text); --crm-main-gradient: var(--accent-gradient); --crm-summary-bg: rgba(174, 180, 224, 0.28); --crm-summary-stroke: rgba(141, 149, 205, 0.45); --crm-summary-title-gradient: var(--crm-main-gradient); --crm-summary-meta: rgba(15, 23, 42, 0.45); --crm-summary-chip-blue-bg: rgba(126, 142, 255, 0.25); --crm-summary-chip-cyan-bg: rgba(117, 219, 246, 0.32); --crm-summary-chip-orange-bg: rgba(255, 171, 120, 0.35); --crm-summary-chip-rose-bg: rgba(250, 176, 187, 0.38); /* CRM note view (Figma light) */ --crm-note-summary-bg: rgba(153, 166, 249, 0.2); --crm-note-tasks-bg: rgba(34, 34, 34, 0.05); --crm-note-related-violet-bg: rgba(153, 166, 249, 0.2); --crm-note-related-yellow-bg: rgba(250, 209, 122, 0.3); --crm-note-related-orange-bg: rgba(255, 136, 92, 0.2); --crm-note-action-bg: rgba(34, 34, 34, 0.05); --crm-note-action-bg-hover: rgba(34, 34, 34, 0.08); --crm-note-action-orange-bg: rgba(255, 136, 92, 0.15); --crm-note-action-orange-color: var(--accent-secondary); --crm-note-checkbox-pending-border: rgba(34, 34, 34, 0.1); --crm-note-checkbox-checked-bg: var(--accent); --crm-note-checkbox-checked-mark: #FFFFFF; --crm-note-input-bg: rgba(34, 34, 34, 0.05); --crm-note-text-muted: rgba(34, 34, 34, 0.3); --crm-note-text-strikethrough: rgba(34, 34, 34, 0.2); /* Documents / Office (light) */ --documents-selected-bg: #dff3f9; --documents-selected-stroke: rgba(120, 127, 246, 0.38); --documents-selected-text: #4659b8; --documents-surface-muted: #eef8fc; --documents-stroke: rgba(100, 170, 215, 0.45); --documents-link-hover: #3585c4; --documents-btn-shadow: 0 2px 14px rgba(70, 89, 184, 0.22); --documents-btn-shadow-hover: 0 4px 20px rgba(70, 89, 184, 0.32); --documents-explorer-divider: rgba(15, 23, 42, 0.08); --documents-explorer-toolbar-bg: rgba(255, 255, 255, 0.85); --documents-empty-bg: rgba(238, 248, 252, 0.6); --documents-empty-border: rgba(100, 170, 215, 0.45); } /* ========== Палитра сервиса Office / Documents (layout-only, theme-agnostic) ========== */ :root { --documents-explorer-tree-width: 15rem; --documents-explorer-details-width: 20rem; --documents-explorer-table-row-height: 3.25rem; --documents-explorer-grid-min: 11.25rem; --documents-explorer-toolbar-height: 3rem; --documents-explorer-control-height: 2.25rem; --documents-explorer-btn-radius: var(--radius-md); } /* ========== УТИЛИТЫ ========== */ /* Glass панели */ .glass-subtle { background: var(--glass-solid-subtle); backdrop-filter: blur(var(--glass-blur-subtle)); -webkit-backdrop-filter: blur(var(--glass-blur-subtle)); border: 1px solid var(--glass-border-subtle); box-shadow: var(--glass-shadow-subtle), var(--glass-inner-glow-subtle); } .glass-medium { background: var(--glass-solid-medium); backdrop-filter: blur(var(--glass-blur-medium)); -webkit-backdrop-filter: blur(var(--glass-blur-medium)); border: 1px solid var(--glass-border-medium); box-shadow: var(--glass-shadow-medium), var(--glass-inner-glow-medium); } .glass-strong { background: var(--glass-solid-strong); backdrop-filter: blur(var(--glass-blur-strong)); -webkit-backdrop-filter: blur(var(--glass-blur-strong)); border: 1px solid var(--glass-border-strong); box-shadow: var(--glass-shadow-strong), var(--glass-inner-glow-strong); } /* Hover эффект для glass элементов */ .glass-interactive { transition: border-color var(--motion-duration-micro, var(--duration-fast)) var(--motion-ease-standard, var(--easing-default)), box-shadow var(--motion-duration-micro, var(--duration-fast)) var(--motion-ease-standard, var(--easing-default)), transform var(--motion-duration-micro, var(--duration-fast)) var(--motion-ease-standard, var(--easing-default)); } .glass-interactive:hover { border-color: var(--glass-border-glow); box-shadow: var(--glass-shadow-medium), var(--glass-inner-glow-medium), var(--hover-glow); transform: translateY(-1px); } /* Accent градиентные кнопки */ .gradient-accent { background: var(--accent-gradient); color: white; border: none; box-shadow: 0 4px 16px rgba(153, 166, 249, 0.3); } .gradient-accent:hover { box-shadow: 0 6px 24px rgba(153, 166, 249, 0.4); transform: translateY(-2px); }