/* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Mobile/TG Canvas visual adapter. Responsive geometry and touch behavior remain legacy-owned in canvas-mobile.css. Every selector is route-scoped because this adapter is also re-imported through tg.css to guarantee late cascade ownership on the Canvas route only. */ @media (max-width:1024px){ html[data-page="canvas"].tg .toolbar[aria-label], html[data-page="canvas"] html.tg .toolbar[aria-label]{ background:color-mix(in srgb,var(--aidc-bg-panel) 94%,transparent); border-color:var(--aidc-border-subtle); box-shadow:var(--aidc-shadow-popover) } } @media (max-width:767px){ html[data-page="canvas"].canvas-dashboard-mode .site-header{ border-bottom-color:var(--aidc-border-subtle) } html[data-page="canvas"] .toolbar[aria-label], html[data-page="canvas"] .board-topbar, html[data-page="canvas"] .zoom-controls, html[data-page="canvas"] .hud-panel, html[data-page="canvas"] .multi-sel-bar{ background:color-mix(in srgb,var(--aidc-bg-popover) 94%,transparent); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-popover) } html[data-page="canvas"] .tool-btn, html[data-page="canvas"] .zoom-btn, html[data-page="canvas"] .multi-sel-bar__btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } html[data-page="canvas"] .tool-btn:hover, html[data-page="canvas"] .zoom-btn:hover, html[data-page="canvas"] .multi-sel-bar__btn:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } html[data-page="canvas"] .tool-btn.active, html[data-page="canvas"] .tool-btn.is-active, html[data-page="canvas"] .zoom-btn.active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent); color:var(--aidc-action-primary-from) } html[data-page="canvas"] .shapes-menu, html[data-page="canvas"] .arrow-type-popup, html[data-page="canvas"] .emoji-popup, html[data-page="canvas"] .export-menu, html[data-page="canvas"] .comment-dialog, html[data-page="canvas"] .canvas-ctx-menu, html[data-page="canvas"] .frames-panel, html[data-page="canvas"] .connector-panel, html[data-page="canvas"] .dt-popover, html[data-page="canvas"] .canvas-format-bar, html[data-page="canvas"] .freehand-format-bar{ background:var(--aidc-bg-popover); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-popover); color:var(--aidc-text-primary) } html[data-page="canvas"] .drawing-toolbar{ background:color-mix(in srgb,var(--aidc-bg-popover) 96%,transparent)!important; border-color:var(--aidc-border-default)!important; box-shadow:var(--aidc-shadow-popover)!important } html[data-page="canvas"] .drawing-toolbar .dt-btn{ background:var(--aidc-btn-secondary-bg)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-secondary)!important } html[data-page="canvas"] .drawing-toolbar .dt-btn:hover{ background:var(--aidc-btn-secondary-bg-hover)!important; color:var(--aidc-text-primary)!important } html[data-page="canvas"] .drawing-toolbar .dt-btn.active, html[data-page="canvas"] .drawing-toolbar .dt-btn.is-active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent)!important; color:var(--aidc-action-primary-from)!important; border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent)!important } html[data-page="canvas"] .drawing-toolbar .dt-sep{ background:var(--aidc-border-subtle)!important } html[data-page="canvas"] .board-topbar .pill{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } html[data-page="canvas"] .board-topbar .pill--board-title{ color:var(--aidc-text-primary) } } /* canvas-format-bars.js injects dark literal colors at runtime. The format bar is chrome, not board content, so its controls must follow the app theme. */ html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar, html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar{ background:var(--aidc-bg-popover)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; box-shadow:var(--aidc-shadow-popover)!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(button,select,input), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(button,select,input){ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; border-color:var(--aidc-border-default)!important; background-color:var(--aidc-btn-secondary-bg)!important; opacity:1!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar){ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; opacity:1!important } /* Runtime frame bars also emit plain spans for W/H and preset metadata. */ html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(span,label), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(span,label){ color:var(--aidc-text-secondary)!important; -webkit-text-fill-color:var(--aidc-text-secondary)!important; opacity:1!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(svg,path,line,rect,circle,polyline), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(svg,path,line,rect,circle,polyline){ color:var(--aidc-text-secondary)!important; stroke:currentColor!important; opacity:1!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar select option, html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar select option{ background:var(--aidc-bg-popover)!important; color:var(--aidc-text-primary)!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-sep,.fmt-divider), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-sep,.fmt-divider){ background:var(--aidc-border-default)!important; border-color:var(--aidc-border-default)!important } @media (pointer:coarse){ html[data-page="canvas"] .toolbar[aria-label], html[data-page="canvas"].tg .toolbar[aria-label], html[data-page="canvas"] .board-topbar, html[data-page="canvas"] .zoom-controls{ box-shadow:none } } /* Canvas Dashboard visual adapter. Grid/list geometry and media readability overlays remain legacy-owned. */ .canvas-dashboard .panel, .panel-templates{ background:var(--aidc-bg-panel); border-color:var(--aidc-border-subtle); box-shadow:var(--aidc-shadow-popover) } .boards-grid, .boards-list, .templates-slider, .custom-select__dropdown{ scrollbar-color:var(--aidc-border-default) transparent } .boards-grid::-webkit-scrollbar-thumb, .boards-list::-webkit-scrollbar-thumb, .templates-slider::-webkit-scrollbar-thumb, .custom-select__dropdown::-webkit-scrollbar-thumb{ background:var(--aidc-border-default) } .template-card, .board-card{ background:var(--aidc-bg-card); border-color:var(--aidc-border-subtle) } .template-card:hover, .board-card:hover, .template-card--user:hover{ border-color:var(--aidc-border-strong); box-shadow:var(--aidc-shadow-popover) } .template-card--blank{ border-color:var(--aidc-border-default) } .template-card--blank:hover{ border-color:color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent) } .template-card__thumb, .board-card__thumb{ background:var(--aidc-bg-elevated); color:var(--aidc-text-secondary) } .template-card--blank .template-card__thumb{ background:linear-gradient(135deg,color-mix(in srgb,var(--aidc-action-primary-from) 6%,transparent),color-mix(in srgb,var(--aidc-cyan-500) 4%,transparent)); color:var(--aidc-action-primary-from) } .template-card__label, .panel-user-templates .panel-title, .board-card__title, .col-name .list-title{ color:var(--aidc-text-primary) } .template-card__badge, .board-card__badge{ background:color-mix(in srgb,var(--aidc-bg-popover) 86%,transparent); color:var(--aidc-text-secondary); border-color:var(--aidc-border-default) } .template-card__menu, .board-card__fav, .board-card__menu-btn, .list-fav-btn, .list-menu-btn{ background:color-mix(in srgb,var(--aidc-bg-popover) 82%,transparent); color:var(--aidc-text-muted) } .template-card__menu:hover, .board-card__menu-btn:hover, .list-fav-btn:hover, .list-menu-btn:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } .board-card__fav.active, .board-card__fav.active:hover, .list-fav-btn.active, .list-fav-btn.active:hover{ color:var(--aidc-amber-500) } .boards-filters label, .boards-sort label, .custom-select__arrow, .boards-search-box .search-icon, .board-card__meta, .boards-list-header, .col-users, .col-opened, .col-owner, .boards-empty__text, .boards-loading{ color:var(--aidc-text-muted) } .custom-select__trigger, .boards-search-box input, .board-card__title-input{ background:var(--aidc-bg-elevated); border-color:var(--aidc-border-default); color:var(--aidc-text-primary) } .custom-select__trigger:hover, .custom-select.open .custom-select__trigger, .boards-search-box input:focus, .board-card__title-input:focus{ border-color:var(--aidc-action-focus); box-shadow:0 0 0 3px var(--aidc-action-focus-ring) } .custom-select__dropdown, .board-ctx-menu{ background:var(--aidc-bg-popover); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-popover) } .custom-select__option, .ctx-item{ color:var(--aidc-text-secondary) } .custom-select__option:hover, .ctx-item:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } .custom-select__option.active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent); color:var(--aidc-action-primary-from) } .ctx-item--danger{ color:var(--aidc-red-500) } .ctx-item--danger:hover{ background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent); color:var(--aidc-red-500) } .ctx-divider{ background:var(--aidc-border-subtle) } .view-btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-muted) } .view-btn:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } .view-btn.active{ background:color-mix(in srgb,var(--aidc-cyan-500) 10%,transparent); border-color:color-mix(in srgb,var(--aidc-cyan-500) 34%,transparent); color:var(--aidc-cyan-500) } .boards-list-header, .boards-list-row{ border-color:var(--aidc-border-subtle) } .boards-list-row:hover{ background:var(--aidc-btn-secondary-bg) } .boards-loading .spinner{ border-color:var(--aidc-border-default); border-top-color:var(--aidc-cyan-500) } .board-info-overlay{ background:var(--aidc-backdrop) } .board-info-panel{ background:var(--aidc-bg-panel); border-color:var(--aidc-border-subtle); box-shadow:var(--aidc-shadow-modal) } .tpl-sub-modal-overlay{ background:var(--aidc-backdrop) } .tpl-sub-modal-popup{ background:var(--aidc-bg-modal); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-modal) } .tpl-sub-modal-title, .tpl-sub-modal-card__label{ color:var(--aidc-text-primary) } .tpl-sub-modal-card{ background:var(--aidc-btn-secondary-bg) } .tpl-sub-modal-card:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent) } .tpl-sub-modal-card__icon svg{ color:var(--aidc-text-secondary) } #canvas-rotation-badge{ background:color-mix(in srgb,var(--aidc-bg-popover) 92%,transparent); color:var(--aidc-text-primary); border-color:color-mix(in srgb,var(--aidc-violet-500) 28%,transparent); box-shadow:var(--aidc-shadow-popover) } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Canvas sharing visual adapter. Dynamic collaboration colors (--user-color) remain owned by presence logic. */ body .share-modal-overlay{ background:var(--aidc-backdrop) } body .share-modal{ background:var(--aidc-bg-modal); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-modal); color:var(--aidc-text-primary) } body .share-modal__title, body .member-name, body .share-invite-meta strong{ color:var(--aidc-text-primary) } body .share-modal__close, body .share-generate-btn, body .share-member-role-label, body .share-remove-btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } body .share-modal__close:hover, body .share-generate-btn:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } body .share-modal__body{ scrollbar-color:var(--aidc-border-default) transparent } body .share-modal__body::-webkit-scrollbar-thumb{ background:var(--aidc-border-default) } body .share-modal__body::-webkit-scrollbar-thumb:hover{ background:var(--aidc-border-strong) } body .share-section, body .share-section--settings, body .share-section--transfer, body .share-section--activity{ border-color:var(--aidc-border-subtle) } body .share-section__label, body .share-invite-meta, body .share-you-tag, body .share-member-role-label, body .share-activity-row, body .share-activity-time{ color:var(--aidc-text-muted) } body .share-invite-input, body .share-role-select{ background:var(--aidc-bg-elevated); border-color:var(--aidc-border-default); color:var(--aidc-text-primary) } body .share-invite-input:focus, body .share-role-select:focus{ border-color:var(--aidc-action-focus); box-shadow:0 0 0 3px var(--aidc-action-focus-ring); outline:none } body .share-role-select option{ background:var(--aidc-bg-popover); color:var(--aidc-text-primary) } body .share-copy-btn, body .share-topbar-btn{ background:color-mix(in srgb,var(--aidc-cyan-500) 10%,transparent); border-color:color-mix(in srgb,var(--aidc-cyan-500) 30%,transparent); color:var(--aidc-cyan-500) } body .share-copy-btn:hover, body .share-topbar-btn:hover{ background:color-mix(in srgb,var(--aidc-cyan-500) 18%,transparent); border-color:color-mix(in srgb,var(--aidc-cyan-500) 44%,transparent) } body .member-row:hover{ background:var(--aidc-btn-secondary-bg-hover) } body .member-online-dot.online{ background:var(--aidc-green-500); box-shadow:0 0 6px color-mix(in srgb,var(--aidc-green-500) 50%,transparent) } body .member-online-dot.offline{ background:var(--aidc-text-muted) } body .member-avatar, body .presence-avatar{ background:color-mix(in srgb,var(--aidc-bg-card) 88%,white 12%); color:var(--aidc-text-primary) } body .presence-more{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-muted) } body .share-remove-btn:hover, body .share-leave-btn, body .share-transfer-btn{ background:color-mix(in srgb,var(--aidc-red-500) 10%,transparent); border-color:var(--aidc-action-danger-border); color:color-mix(in srgb,var(--aidc-red-500) 68%,white 32%) } body .share-remove-btn:hover, body .share-leave-btn:hover, body .share-transfer-btn:hover{ background:color-mix(in srgb,var(--aidc-red-500) 18%,transparent); border-color:color-mix(in srgb,var(--aidc-red-500) 42%,transparent) } body .view-only-badge{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent); color:var(--aidc-action-primary-from); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 36%,transparent) } body .share-setting-row{ color:var(--aidc-text-secondary) } body .share-setting-row:hover{ color:var(--aidc-text-primary) } body .share-setting-cb{ accent-color:var(--aidc-action-primary-from) } body .share-activity-name{ color:var(--aidc-text-secondary) } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Canvas Brush Studio visual adapter. Brush swatches and texture previews remain tool-owned. */ .brush-studio-backdrop{ background:var(--aidc-backdrop); color:var(--aidc-text-secondary) } .brush-studio-modal{ background:var(--aidc-bg-modal); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-modal) } .bs-header, .bs-sidebar{ background:var(--aidc-bg-panel); border-color:var(--aidc-border-subtle) } .bs-title, .bs-section-title{ color:var(--aidc-text-primary) } .bs-sub-title, .bs-brush-list-title, .bs-testpad-info, .bs-val, .bs-val--mono, .bs-grain-empty, .bs-hint, .bs-empty{ color:var(--aidc-text-muted) } .bs-btn, .bs-testpad-btn, .bs-mode-btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } .bs-btn:hover, .bs-testpad-btn:hover, .bs-mode-btn:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } .bs-btn--primary{ background:linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to)); border-color:transparent; color:var(--aidc-text-inverse); box-shadow:0 0 16px var(--aidc-action-primary-glow) } .bs-btn--primary:hover{ filter:brightness(1.08) } .bs-btn--accent{ background:color-mix(in srgb,var(--aidc-violet-500) 14%,transparent); border-color:color-mix(in srgb,var(--aidc-violet-500) 36%,transparent); color:var(--aidc-violet-500) } .bs-btn--accent:hover{ background:color-mix(in srgb,var(--aidc-violet-500) 22%,transparent); color:var(--aidc-text-primary) } .bs-brush-list, .bs-nav, .bs-section-content{ scrollbar-color:var(--aidc-border-default) transparent } .bs-brush-list::-webkit-scrollbar-thumb, .bs-nav::-webkit-scrollbar-thumb, .bs-section-content::-webkit-scrollbar-thumb{ background:var(--aidc-border-default) } .bs-section-content::-webkit-scrollbar-thumb:hover{ background:var(--aidc-border-strong) } .bs-brush-list-item, .bs-nav-item{ color:var(--aidc-text-muted) } .bs-brush-list-item:hover, .bs-nav-item:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } .bs-brush-list-item.is-active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 10%,transparent); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent); color:var(--aidc-action-primary-from) } .bs-nav-item.is-active{ background:color-mix(in srgb,var(--aidc-violet-500) 14%,transparent); color:var(--aidc-violet-500) } .bs-testpad{ background:var(--aidc-bg-elevated); border-color:var(--aidc-border-subtle) } .bs-testpad canvas{ border-color:var(--aidc-border-default) } .bs-testpad-info b{ color:var(--aidc-text-secondary) } .bs-row .bs-label{ color:var(--aidc-text-secondary) } .bs-slider{ background:var(--aidc-btn-secondary-bg-hover) } .bs-slider::-webkit-slider-thumb, .bs-slider::-moz-range-thumb{ background:var(--aidc-violet-500); border-color:color-mix(in srgb,var(--aidc-text-primary) 30%,transparent) } .bs-slider::-webkit-slider-runnable-track{ background:linear-gradient(to right,color-mix(in srgb,var(--aidc-violet-500) 50%,transparent),color-mix(in srgb,var(--aidc-violet-500) 15%,transparent)) } .bs-toggle-track{ background:var(--aidc-btn-secondary-bg-hover) } .bs-toggle-thumb{ background:var(--aidc-text-muted) } .bs-checkbox:checked + .bs-toggle-track{ background:color-mix(in srgb,var(--aidc-violet-500) 40%,transparent) } .bs-checkbox:checked + .bs-toggle-track .bs-toggle-thumb{ background:var(--aidc-violet-500) } .bs-select, .bs-input{ background:var(--aidc-bg-elevated); border-color:var(--aidc-border-default); color:var(--aidc-text-primary) } .bs-select:focus, .bs-input:focus{ border-color:var(--aidc-action-focus); box-shadow:0 0 0 3px var(--aidc-action-focus-ring) } .bs-select option{ background:var(--aidc-bg-popover); color:var(--aidc-text-primary) } .bs-input::placeholder{ color:var(--aidc-text-muted) } .bs-mode-btn.is-active{ background:color-mix(in srgb,var(--aidc-violet-500) 16%,transparent); border-color:color-mix(in srgb,var(--aidc-violet-500) 36%,transparent); color:var(--aidc-violet-500) } .bs-brush-list-thumb{ background:var(--aidc-bg-elevated) } .bs-toast{ background:var(--aidc-violet-500); color:var(--aidc-text-inverse); box-shadow:var(--aidc-shadow-popover) } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Mobile/TG Canvas visual adapter. Responsive geometry and touch behavior remain legacy-owned in canvas-mobile.css. Every selector is route-scoped because this adapter is also re-imported through tg.css to guarantee late cascade ownership on the Canvas route only. */ @media (max-width:1024px){ html[data-page="canvas"].tg .toolbar[aria-label], html[data-page="canvas"] html.tg .toolbar[aria-label]{ background:color-mix(in srgb,var(--aidc-bg-panel) 94%,transparent); border-color:var(--aidc-border-subtle); box-shadow:var(--aidc-shadow-popover) } } @media (max-width:767px){ html[data-page="canvas"].canvas-dashboard-mode .site-header{ border-bottom-color:var(--aidc-border-subtle) } html[data-page="canvas"] .toolbar[aria-label], html[data-page="canvas"] .board-topbar, html[data-page="canvas"] .zoom-controls, html[data-page="canvas"] .hud-panel, html[data-page="canvas"] .multi-sel-bar{ background:color-mix(in srgb,var(--aidc-bg-popover) 94%,transparent); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-popover) } html[data-page="canvas"] .tool-btn, html[data-page="canvas"] .zoom-btn, html[data-page="canvas"] .multi-sel-bar__btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } html[data-page="canvas"] .tool-btn:hover, html[data-page="canvas"] .zoom-btn:hover, html[data-page="canvas"] .multi-sel-bar__btn:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } html[data-page="canvas"] .tool-btn.active, html[data-page="canvas"] .tool-btn.is-active, html[data-page="canvas"] .zoom-btn.active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent); color:var(--aidc-action-primary-from) } html[data-page="canvas"] .shapes-menu, html[data-page="canvas"] .arrow-type-popup, html[data-page="canvas"] .emoji-popup, html[data-page="canvas"] .export-menu, html[data-page="canvas"] .comment-dialog, html[data-page="canvas"] .canvas-ctx-menu, html[data-page="canvas"] .frames-panel, html[data-page="canvas"] .connector-panel, html[data-page="canvas"] .dt-popover, html[data-page="canvas"] .canvas-format-bar, html[data-page="canvas"] .freehand-format-bar{ background:var(--aidc-bg-popover); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-popover); color:var(--aidc-text-primary) } html[data-page="canvas"] .drawing-toolbar{ background:color-mix(in srgb,var(--aidc-bg-popover) 96%,transparent)!important; border-color:var(--aidc-border-default)!important; box-shadow:var(--aidc-shadow-popover)!important } html[data-page="canvas"] .drawing-toolbar .dt-btn{ background:var(--aidc-btn-secondary-bg)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-secondary)!important } html[data-page="canvas"] .drawing-toolbar .dt-btn:hover{ background:var(--aidc-btn-secondary-bg-hover)!important; color:var(--aidc-text-primary)!important } html[data-page="canvas"] .drawing-toolbar .dt-btn.active, html[data-page="canvas"] .drawing-toolbar .dt-btn.is-active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent)!important; color:var(--aidc-action-primary-from)!important; border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent)!important } html[data-page="canvas"] .drawing-toolbar .dt-sep{ background:var(--aidc-border-subtle)!important } html[data-page="canvas"] .board-topbar .pill{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } html[data-page="canvas"] .board-topbar .pill--board-title{ color:var(--aidc-text-primary) } } /* canvas-format-bars.js injects dark literal colors at runtime. The format bar is chrome, not board content, so its controls must follow the app theme. */ html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar, html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar{ background:var(--aidc-bg-popover)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; box-shadow:var(--aidc-shadow-popover)!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(button,select,input), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(button,select,input){ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; border-color:var(--aidc-border-default)!important; background-color:var(--aidc-btn-secondary-bg)!important; opacity:1!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar){ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; opacity:1!important } /* Runtime frame bars also emit plain spans for W/H and preset metadata. */ html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(span,label), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(span,label){ color:var(--aidc-text-secondary)!important; -webkit-text-fill-color:var(--aidc-text-secondary)!important; opacity:1!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(svg,path,line,rect,circle,polyline), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(svg,path,line,rect,circle,polyline){ color:var(--aidc-text-secondary)!important; stroke:currentColor!important; opacity:1!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar select option, html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar select option{ background:var(--aidc-bg-popover)!important; color:var(--aidc-text-primary)!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-sep,.fmt-divider), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-sep,.fmt-divider){ background:var(--aidc-border-default)!important; border-color:var(--aidc-border-default)!important } @media (pointer:coarse){ html[data-page="canvas"] .toolbar[aria-label], html[data-page="canvas"].tg .toolbar[aria-label], html[data-page="canvas"] .board-topbar, html[data-page="canvas"] .zoom-controls{ box-shadow:none } } /* Canvas Dashboard visual adapter. Grid/list geometry and media readability overlays remain legacy-owned. */ .canvas-dashboard .panel, .panel-templates{ background:var(--aidc-bg-panel); border-color:var(--aidc-border-subtle); box-shadow:var(--aidc-shadow-popover) } .boards-grid, .boards-list, .templates-slider, .custom-select__dropdown{ scrollbar-color:var(--aidc-border-default) transparent } .boards-grid::-webkit-scrollbar-thumb, .boards-list::-webkit-scrollbar-thumb, .templates-slider::-webkit-scrollbar-thumb, .custom-select__dropdown::-webkit-scrollbar-thumb{ background:var(--aidc-border-default) } .template-card, .board-card{ background:var(--aidc-bg-card); border-color:var(--aidc-border-subtle) } .template-card:hover, .board-card:hover, .template-card--user:hover{ border-color:var(--aidc-border-strong); box-shadow:var(--aidc-shadow-popover) } .template-card--blank{ border-color:var(--aidc-border-default) } .template-card--blank:hover{ border-color:color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent) } .template-card__thumb, .board-card__thumb{ background:var(--aidc-bg-elevated); color:var(--aidc-text-secondary) } .template-card--blank .template-card__thumb{ background:linear-gradient(135deg,color-mix(in srgb,var(--aidc-action-primary-from) 6%,transparent),color-mix(in srgb,var(--aidc-cyan-500) 4%,transparent)); color:var(--aidc-action-primary-from) } .template-card__label, .panel-user-templates .panel-title, .board-card__title, .col-name .list-title{ color:var(--aidc-text-primary) } .template-card__badge, .board-card__badge{ background:color-mix(in srgb,var(--aidc-bg-popover) 86%,transparent); color:var(--aidc-text-secondary); border-color:var(--aidc-border-default) } .template-card__menu, .board-card__fav, .board-card__menu-btn, .list-fav-btn, .list-menu-btn{ background:color-mix(in srgb,var(--aidc-bg-popover) 82%,transparent); color:var(--aidc-text-muted) } .template-card__menu:hover, .board-card__menu-btn:hover, .list-fav-btn:hover, .list-menu-btn:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } .board-card__fav.active, .board-card__fav.active:hover, .list-fav-btn.active, .list-fav-btn.active:hover{ color:var(--aidc-amber-500) } .boards-filters label, .boards-sort label, .custom-select__arrow, .boards-search-box .search-icon, .board-card__meta, .boards-list-header, .col-users, .col-opened, .col-owner, .boards-empty__text, .boards-loading{ color:var(--aidc-text-muted) } .custom-select__trigger, .boards-search-box input, .board-card__title-input{ background:var(--aidc-bg-elevated); border-color:var(--aidc-border-default); color:var(--aidc-text-primary) } .custom-select__trigger:hover, .custom-select.open .custom-select__trigger, .boards-search-box input:focus, .board-card__title-input:focus{ border-color:var(--aidc-action-focus); box-shadow:0 0 0 3px var(--aidc-action-focus-ring) } .custom-select__dropdown, .board-ctx-menu{ background:var(--aidc-bg-popover); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-popover) } .custom-select__option, .ctx-item{ color:var(--aidc-text-secondary) } .custom-select__option:hover, .ctx-item:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } .custom-select__option.active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent); color:var(--aidc-action-primary-from) } .ctx-item--danger{ color:var(--aidc-red-500) } .ctx-item--danger:hover{ background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent); color:var(--aidc-red-500) } .ctx-divider{ background:var(--aidc-border-subtle) } .view-btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-muted) } .view-btn:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } .view-btn.active{ background:color-mix(in srgb,var(--aidc-cyan-500) 10%,transparent); border-color:color-mix(in srgb,var(--aidc-cyan-500) 34%,transparent); color:var(--aidc-cyan-500) } .boards-list-header, .boards-list-row{ border-color:var(--aidc-border-subtle) } .boards-list-row:hover{ background:var(--aidc-btn-secondary-bg) } .boards-loading .spinner{ border-color:var(--aidc-border-default); border-top-color:var(--aidc-cyan-500) } .board-info-overlay{ background:var(--aidc-backdrop) } .board-info-panel{ background:var(--aidc-bg-panel); border-color:var(--aidc-border-subtle); box-shadow:var(--aidc-shadow-modal) } .tpl-sub-modal-overlay{ background:var(--aidc-backdrop) } .tpl-sub-modal-popup{ background:var(--aidc-bg-modal); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-modal) } .tpl-sub-modal-title, .tpl-sub-modal-card__label{ color:var(--aidc-text-primary) } .tpl-sub-modal-card{ background:var(--aidc-btn-secondary-bg) } .tpl-sub-modal-card:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent) } .tpl-sub-modal-card__icon svg{ color:var(--aidc-text-secondary) } #canvas-rotation-badge{ background:color-mix(in srgb,var(--aidc-bg-popover) 92%,transparent); color:var(--aidc-text-primary); border-color:color-mix(in srgb,var(--aidc-violet-500) 28%,transparent); box-shadow:var(--aidc-shadow-popover) } /* Temporary compatibility layer for hardcoded !important theme rules in canvas/index.html. Remove this file together with the legacy inline theme block during physical HTML cleanup. */ html[data-page="canvas"] body .btn-primary{ background:linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to))!important; color:var(--aidc-text-inverse)!important; border-color:transparent!important; box-shadow:0 0 20px var(--aidc-action-primary-glow)!important } html[data-page="canvas"] body .btn-primary:hover{ box-shadow:0 0 28px var(--aidc-action-primary-glow)!important } html[data-page="canvas"] body .template-card, html[data-page="canvas"] body .board-card{ background:var(--aidc-bg-card)!important } html[data-page="canvas"] body .template-card__thumb, html[data-page="canvas"] body .board-card__thumb{ background:var(--aidc-bg-elevated)!important } html[data-page="canvas"] body .template-card--blank .template-card__thumb{ background:linear-gradient(135deg,color-mix(in srgb,var(--aidc-action-primary-from) 6%,transparent),color-mix(in srgb,var(--aidc-cyan-500) 4%,transparent))!important; color:var(--aidc-action-primary-from)!important } html[data-page="canvas"] body .custom-select__dropdown{ background:var(--aidc-bg-popover)!important } html[data-page="canvas"] body .custom-select__option.active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent)!important; color:var(--aidc-action-primary-from)!important } html[data-page="canvas"] body .board-card__title-input{ border-color:var(--aidc-action-focus)!important; box-shadow:0 0 0 3px var(--aidc-action-focus-ring)!important } /* Canvas Slide Edit visual adapter. Layout and responsive geometry stay legacy-owned. */ .slide-edit-toolbar, .slide-edit-strip, .slide-edit-notes{ background:color-mix(in srgb,var(--aidc-bg-panel) 92%,transparent); border-color:var(--aidc-border-subtle); color:var(--aidc-text-primary) } .slide-edit-back-btn, .slide-edit-tbtn, .mmz-btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } .slide-edit-back-btn:hover, .slide-edit-tbtn:hover, .mmz-btn:hover, .mmz-btn:active{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } .slide-edit-title, .slide-edit-strip__num, .slide-edit-notes__header, .slide-edit-notes__close, .slide-edit-notes__textarea::placeholder{ color:var(--aidc-text-muted) } .slide-edit-tbtn.is-active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent); color:var(--aidc-action-primary-from); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent) } .slide-edit-close:hover{ background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent); color:var(--aidc-red-500); border-color:var(--aidc-action-danger-border) } .slide-edit-strip{ scrollbar-color:var(--aidc-border-default) transparent } .slide-edit-strip::-webkit-scrollbar-thumb{ background:var(--aidc-border-default) } .slide-edit-strip__item:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong) } .slide-edit-strip__item.active{ border-color:var(--aidc-action-primary-from); background:color-mix(in srgb,var(--aidc-action-primary-from) 8%,transparent) } .slide-edit-strip__item.drag-over{ border-color:var(--aidc-violet-500); background:color-mix(in srgb,var(--aidc-violet-500) 10%,transparent) } .slide-edit-strip__preview{ background:var(--aidc-bg-elevated); border-color:var(--aidc-border-subtle) } .slide-edit-strip__label{ color:var(--aidc-text-secondary) } .slide-edit-strip__add{ border-color:var(--aidc-border-default); color:var(--aidc-text-muted) } .slide-edit-strip__add:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } .slide-edit-notes__header{ border-bottom-color:var(--aidc-border-subtle) } .slide-edit-notes__close:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } .slide-edit-notes__textarea{ color:var(--aidc-text-secondary); scrollbar-color:var(--aidc-border-default) transparent } .slide-edit-notes__textarea::-webkit-scrollbar-thumb{ background:var(--aidc-border-default) } .slide-edit-container .mode-mini-zoom{ background:color-mix(in srgb,var(--aidc-bg-popover) 86%,transparent); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary); box-shadow:var(--aidc-shadow-popover) } .mmz-label{ color:var(--aidc-text-secondary) } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Mobile/TG Canvas visual adapter. Responsive geometry and touch behavior remain legacy-owned in canvas-mobile.css. Every selector is route-scoped because this adapter is also re-imported through tg.css to guarantee late cascade ownership on the Canvas route only. */ @media (max-width:1024px){ html[data-page="canvas"].tg .toolbar[aria-label], html[data-page="canvas"] html.tg .toolbar[aria-label]{ background:color-mix(in srgb,var(--aidc-bg-panel) 94%,transparent); border-color:var(--aidc-border-subtle); box-shadow:var(--aidc-shadow-popover) } } @media (max-width:767px){ html[data-page="canvas"].canvas-dashboard-mode .site-header{ border-bottom-color:var(--aidc-border-subtle) } html[data-page="canvas"] .toolbar[aria-label], html[data-page="canvas"] .board-topbar, html[data-page="canvas"] .zoom-controls, html[data-page="canvas"] .hud-panel, html[data-page="canvas"] .multi-sel-bar{ background:color-mix(in srgb,var(--aidc-bg-popover) 94%,transparent); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-popover) } html[data-page="canvas"] .tool-btn, html[data-page="canvas"] .zoom-btn, html[data-page="canvas"] .multi-sel-bar__btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } html[data-page="canvas"] .tool-btn:hover, html[data-page="canvas"] .zoom-btn:hover, html[data-page="canvas"] .multi-sel-bar__btn:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } html[data-page="canvas"] .tool-btn.active, html[data-page="canvas"] .tool-btn.is-active, html[data-page="canvas"] .zoom-btn.active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent); color:var(--aidc-action-primary-from) } html[data-page="canvas"] .shapes-menu, html[data-page="canvas"] .arrow-type-popup, html[data-page="canvas"] .emoji-popup, html[data-page="canvas"] .export-menu, html[data-page="canvas"] .comment-dialog, html[data-page="canvas"] .canvas-ctx-menu, html[data-page="canvas"] .frames-panel, html[data-page="canvas"] .connector-panel, html[data-page="canvas"] .dt-popover, html[data-page="canvas"] .canvas-format-bar, html[data-page="canvas"] .freehand-format-bar{ background:var(--aidc-bg-popover); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-popover); color:var(--aidc-text-primary) } html[data-page="canvas"] .drawing-toolbar{ background:color-mix(in srgb,var(--aidc-bg-popover) 96%,transparent)!important; border-color:var(--aidc-border-default)!important; box-shadow:var(--aidc-shadow-popover)!important } html[data-page="canvas"] .drawing-toolbar .dt-btn{ background:var(--aidc-btn-secondary-bg)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-secondary)!important } html[data-page="canvas"] .drawing-toolbar .dt-btn:hover{ background:var(--aidc-btn-secondary-bg-hover)!important; color:var(--aidc-text-primary)!important } html[data-page="canvas"] .drawing-toolbar .dt-btn.active, html[data-page="canvas"] .drawing-toolbar .dt-btn.is-active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent)!important; color:var(--aidc-action-primary-from)!important; border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent)!important } html[data-page="canvas"] .drawing-toolbar .dt-sep{ background:var(--aidc-border-subtle)!important } html[data-page="canvas"] .board-topbar .pill{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } html[data-page="canvas"] .board-topbar .pill--board-title{ color:var(--aidc-text-primary) } } /* canvas-format-bars.js injects dark literal colors at runtime. The format bar is chrome, not board content, so its controls must follow the app theme. */ html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar, html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar{ background:var(--aidc-bg-popover)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; box-shadow:var(--aidc-shadow-popover)!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(button,select,input), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(button,select,input){ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; border-color:var(--aidc-border-default)!important; background-color:var(--aidc-btn-secondary-bg)!important; opacity:1!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar){ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; opacity:1!important } /* Runtime frame bars also emit plain spans for W/H and preset metadata. */ html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(span,label), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(span,label){ color:var(--aidc-text-secondary)!important; -webkit-text-fill-color:var(--aidc-text-secondary)!important; opacity:1!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(svg,path,line,rect,circle,polyline), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(svg,path,line,rect,circle,polyline){ color:var(--aidc-text-secondary)!important; stroke:currentColor!important; opacity:1!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar select option, html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar select option{ background:var(--aidc-bg-popover)!important; color:var(--aidc-text-primary)!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-sep,.fmt-divider), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-sep,.fmt-divider){ background:var(--aidc-border-default)!important; border-color:var(--aidc-border-default)!important } @media (pointer:coarse){ html[data-page="canvas"] .toolbar[aria-label], html[data-page="canvas"].tg .toolbar[aria-label], html[data-page="canvas"] .board-topbar, html[data-page="canvas"] .zoom-controls{ box-shadow:none } } /* Canvas Dashboard visual adapter. Grid/list geometry and media readability overlays remain legacy-owned. */ .canvas-dashboard .panel, .panel-templates{ background:var(--aidc-bg-panel); border-color:var(--aidc-border-subtle); box-shadow:var(--aidc-shadow-popover) } .boards-grid, .boards-list, .templates-slider, .custom-select__dropdown{ scrollbar-color:var(--aidc-border-default) transparent } .boards-grid::-webkit-scrollbar-thumb, .boards-list::-webkit-scrollbar-thumb, .templates-slider::-webkit-scrollbar-thumb, .custom-select__dropdown::-webkit-scrollbar-thumb{ background:var(--aidc-border-default) } .template-card, .board-card{ background:var(--aidc-bg-card); border-color:var(--aidc-border-subtle) } .template-card:hover, .board-card:hover, .template-card--user:hover{ border-color:var(--aidc-border-strong); box-shadow:var(--aidc-shadow-popover) } .template-card--blank{ border-color:var(--aidc-border-default) } .template-card--blank:hover{ border-color:color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent) } .template-card__thumb, .board-card__thumb{ background:var(--aidc-bg-elevated); color:var(--aidc-text-secondary) } .template-card--blank .template-card__thumb{ background:linear-gradient(135deg,color-mix(in srgb,var(--aidc-action-primary-from) 6%,transparent),color-mix(in srgb,var(--aidc-cyan-500) 4%,transparent)); color:var(--aidc-action-primary-from) } .template-card__label, .panel-user-templates .panel-title, .board-card__title, .col-name .list-title{ color:var(--aidc-text-primary) } .template-card__badge, .board-card__badge{ background:color-mix(in srgb,var(--aidc-bg-popover) 86%,transparent); color:var(--aidc-text-secondary); border-color:var(--aidc-border-default) } .template-card__menu, .board-card__fav, .board-card__menu-btn, .list-fav-btn, .list-menu-btn{ background:color-mix(in srgb,var(--aidc-bg-popover) 82%,transparent); color:var(--aidc-text-muted) } .template-card__menu:hover, .board-card__menu-btn:hover, .list-fav-btn:hover, .list-menu-btn:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } .board-card__fav.active, .board-card__fav.active:hover, .list-fav-btn.active, .list-fav-btn.active:hover{ color:var(--aidc-amber-500) } .boards-filters label, .boards-sort label, .custom-select__arrow, .boards-search-box .search-icon, .board-card__meta, .boards-list-header, .col-users, .col-opened, .col-owner, .boards-empty__text, .boards-loading{ color:var(--aidc-text-muted) } .custom-select__trigger, .boards-search-box input, .board-card__title-input{ background:var(--aidc-bg-elevated); border-color:var(--aidc-border-default); color:var(--aidc-text-primary) } .custom-select__trigger:hover, .custom-select.open .custom-select__trigger, .boards-search-box input:focus, .board-card__title-input:focus{ border-color:var(--aidc-action-focus); box-shadow:0 0 0 3px var(--aidc-action-focus-ring) } .custom-select__dropdown, .board-ctx-menu{ background:var(--aidc-bg-popover); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-popover) } .custom-select__option, .ctx-item{ color:var(--aidc-text-secondary) } .custom-select__option:hover, .ctx-item:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } .custom-select__option.active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent); color:var(--aidc-action-primary-from) } .ctx-item--danger{ color:var(--aidc-red-500) } .ctx-item--danger:hover{ background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent); color:var(--aidc-red-500) } .ctx-divider{ background:var(--aidc-border-subtle) } .view-btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-muted) } .view-btn:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } .view-btn.active{ background:color-mix(in srgb,var(--aidc-cyan-500) 10%,transparent); border-color:color-mix(in srgb,var(--aidc-cyan-500) 34%,transparent); color:var(--aidc-cyan-500) } .boards-list-header, .boards-list-row{ border-color:var(--aidc-border-subtle) } .boards-list-row:hover{ background:var(--aidc-btn-secondary-bg) } .boards-loading .spinner{ border-color:var(--aidc-border-default); border-top-color:var(--aidc-cyan-500) } .board-info-overlay{ background:var(--aidc-backdrop) } .board-info-panel{ background:var(--aidc-bg-panel); border-color:var(--aidc-border-subtle); box-shadow:var(--aidc-shadow-modal) } .tpl-sub-modal-overlay{ background:var(--aidc-backdrop) } .tpl-sub-modal-popup{ background:var(--aidc-bg-modal); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-modal) } .tpl-sub-modal-title, .tpl-sub-modal-card__label{ color:var(--aidc-text-primary) } .tpl-sub-modal-card{ background:var(--aidc-btn-secondary-bg) } .tpl-sub-modal-card:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent) } .tpl-sub-modal-card__icon svg{ color:var(--aidc-text-secondary) } #canvas-rotation-badge{ background:color-mix(in srgb,var(--aidc-bg-popover) 92%,transparent); color:var(--aidc-text-primary); border-color:color-mix(in srgb,var(--aidc-violet-500) 28%,transparent); box-shadow:var(--aidc-shadow-popover) } /* Temporary compatibility layer for hardcoded !important theme rules in canvas/index.html. Remove this file together with the legacy inline theme block during physical HTML cleanup. */ html[data-page="canvas"] body .btn-primary{ background:linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to))!important; color:var(--aidc-text-inverse)!important; border-color:transparent!important; box-shadow:0 0 20px var(--aidc-action-primary-glow)!important } html[data-page="canvas"] body .btn-primary:hover{ box-shadow:0 0 28px var(--aidc-action-primary-glow)!important } html[data-page="canvas"] body .template-card, html[data-page="canvas"] body .board-card{ background:var(--aidc-bg-card)!important } html[data-page="canvas"] body .template-card__thumb, html[data-page="canvas"] body .board-card__thumb{ background:var(--aidc-bg-elevated)!important } html[data-page="canvas"] body .template-card--blank .template-card__thumb{ background:linear-gradient(135deg,color-mix(in srgb,var(--aidc-action-primary-from) 6%,transparent),color-mix(in srgb,var(--aidc-cyan-500) 4%,transparent))!important; color:var(--aidc-action-primary-from)!important } html[data-page="canvas"] body .custom-select__dropdown{ background:var(--aidc-bg-popover)!important } html[data-page="canvas"] body .custom-select__option.active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent)!important; color:var(--aidc-action-primary-from)!important } html[data-page="canvas"] body .board-card__title-input{ border-color:var(--aidc-action-focus)!important; box-shadow:0 0 0 3px var(--aidc-action-focus-ring)!important } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Canvas Brush Studio visual adapter. Brush swatches and texture previews remain tool-owned. */ .brush-studio-backdrop{ background:var(--aidc-backdrop); color:var(--aidc-text-secondary) } .brush-studio-modal{ background:var(--aidc-bg-modal); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-modal) } .bs-header, .bs-sidebar{ background:var(--aidc-bg-panel); border-color:var(--aidc-border-subtle) } .bs-title, .bs-section-title{ color:var(--aidc-text-primary) } .bs-sub-title, .bs-brush-list-title, .bs-testpad-info, .bs-val, .bs-val--mono, .bs-grain-empty, .bs-hint, .bs-empty{ color:var(--aidc-text-muted) } .bs-btn, .bs-testpad-btn, .bs-mode-btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } .bs-btn:hover, .bs-testpad-btn:hover, .bs-mode-btn:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } .bs-btn--primary{ background:linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to)); border-color:transparent; color:var(--aidc-text-inverse); box-shadow:0 0 16px var(--aidc-action-primary-glow) } .bs-btn--primary:hover{ filter:brightness(1.08) } .bs-btn--accent{ background:color-mix(in srgb,var(--aidc-violet-500) 14%,transparent); border-color:color-mix(in srgb,var(--aidc-violet-500) 36%,transparent); color:var(--aidc-violet-500) } .bs-btn--accent:hover{ background:color-mix(in srgb,var(--aidc-violet-500) 22%,transparent); color:var(--aidc-text-primary) } .bs-brush-list, .bs-nav, .bs-section-content{ scrollbar-color:var(--aidc-border-default) transparent } .bs-brush-list::-webkit-scrollbar-thumb, .bs-nav::-webkit-scrollbar-thumb, .bs-section-content::-webkit-scrollbar-thumb{ background:var(--aidc-border-default) } .bs-section-content::-webkit-scrollbar-thumb:hover{ background:var(--aidc-border-strong) } .bs-brush-list-item, .bs-nav-item{ color:var(--aidc-text-muted) } .bs-brush-list-item:hover, .bs-nav-item:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } .bs-brush-list-item.is-active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 10%,transparent); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent); color:var(--aidc-action-primary-from) } .bs-nav-item.is-active{ background:color-mix(in srgb,var(--aidc-violet-500) 14%,transparent); color:var(--aidc-violet-500) } .bs-testpad{ background:var(--aidc-bg-elevated); border-color:var(--aidc-border-subtle) } .bs-testpad canvas{ border-color:var(--aidc-border-default) } .bs-testpad-info b{ color:var(--aidc-text-secondary) } .bs-row .bs-label{ color:var(--aidc-text-secondary) } .bs-slider{ background:var(--aidc-btn-secondary-bg-hover) } .bs-slider::-webkit-slider-thumb, .bs-slider::-moz-range-thumb{ background:var(--aidc-violet-500); border-color:color-mix(in srgb,var(--aidc-text-primary) 30%,transparent) } .bs-slider::-webkit-slider-runnable-track{ background:linear-gradient(to right,color-mix(in srgb,var(--aidc-violet-500) 50%,transparent),color-mix(in srgb,var(--aidc-violet-500) 15%,transparent)) } .bs-toggle-track{ background:var(--aidc-btn-secondary-bg-hover) } .bs-toggle-thumb{ background:var(--aidc-text-muted) } .bs-checkbox:checked + .bs-toggle-track{ background:color-mix(in srgb,var(--aidc-violet-500) 40%,transparent) } .bs-checkbox:checked + .bs-toggle-track .bs-toggle-thumb{ background:var(--aidc-violet-500) } .bs-select, .bs-input{ background:var(--aidc-bg-elevated); border-color:var(--aidc-border-default); color:var(--aidc-text-primary) } .bs-select:focus, .bs-input:focus{ border-color:var(--aidc-action-focus); box-shadow:0 0 0 3px var(--aidc-action-focus-ring) } .bs-select option{ background:var(--aidc-bg-popover); color:var(--aidc-text-primary) } .bs-input::placeholder{ color:var(--aidc-text-muted) } .bs-mode-btn.is-active{ background:color-mix(in srgb,var(--aidc-violet-500) 16%,transparent); border-color:color-mix(in srgb,var(--aidc-violet-500) 36%,transparent); color:var(--aidc-violet-500) } .bs-brush-list-thumb{ background:var(--aidc-bg-elevated) } .bs-toast{ background:var(--aidc-violet-500); color:var(--aidc-text-inverse); box-shadow:var(--aidc-shadow-popover) } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Mobile/TG Canvas visual adapter. Responsive geometry and touch behavior remain legacy-owned in canvas-mobile.css. Every selector is route-scoped because this adapter is also re-imported through tg.css to guarantee late cascade ownership on the Canvas route only. */ @media (max-width:1024px){ html[data-page="canvas"].tg .toolbar[aria-label], html[data-page="canvas"] html.tg .toolbar[aria-label]{ background:color-mix(in srgb,var(--aidc-bg-panel) 94%,transparent); border-color:var(--aidc-border-subtle); box-shadow:var(--aidc-shadow-popover) } } @media (max-width:767px){ html[data-page="canvas"].canvas-dashboard-mode .site-header{ border-bottom-color:var(--aidc-border-subtle) } html[data-page="canvas"] .toolbar[aria-label], html[data-page="canvas"] .board-topbar, html[data-page="canvas"] .zoom-controls, html[data-page="canvas"] .hud-panel, html[data-page="canvas"] .multi-sel-bar{ background:color-mix(in srgb,var(--aidc-bg-popover) 94%,transparent); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-popover) } html[data-page="canvas"] .tool-btn, html[data-page="canvas"] .zoom-btn, html[data-page="canvas"] .multi-sel-bar__btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } html[data-page="canvas"] .tool-btn:hover, html[data-page="canvas"] .zoom-btn:hover, html[data-page="canvas"] .multi-sel-bar__btn:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } html[data-page="canvas"] .tool-btn.active, html[data-page="canvas"] .tool-btn.is-active, html[data-page="canvas"] .zoom-btn.active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent); color:var(--aidc-action-primary-from) } html[data-page="canvas"] .shapes-menu, html[data-page="canvas"] .arrow-type-popup, html[data-page="canvas"] .emoji-popup, html[data-page="canvas"] .export-menu, html[data-page="canvas"] .comment-dialog, html[data-page="canvas"] .canvas-ctx-menu, html[data-page="canvas"] .frames-panel, html[data-page="canvas"] .connector-panel, html[data-page="canvas"] .dt-popover, html[data-page="canvas"] .canvas-format-bar, html[data-page="canvas"] .freehand-format-bar{ background:var(--aidc-bg-popover); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-popover); color:var(--aidc-text-primary) } html[data-page="canvas"] .drawing-toolbar{ background:color-mix(in srgb,var(--aidc-bg-popover) 96%,transparent)!important; border-color:var(--aidc-border-default)!important; box-shadow:var(--aidc-shadow-popover)!important } html[data-page="canvas"] .drawing-toolbar .dt-btn{ background:var(--aidc-btn-secondary-bg)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-secondary)!important } html[data-page="canvas"] .drawing-toolbar .dt-btn:hover{ background:var(--aidc-btn-secondary-bg-hover)!important; color:var(--aidc-text-primary)!important } html[data-page="canvas"] .drawing-toolbar .dt-btn.active, html[data-page="canvas"] .drawing-toolbar .dt-btn.is-active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent)!important; color:var(--aidc-action-primary-from)!important; border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent)!important } html[data-page="canvas"] .drawing-toolbar .dt-sep{ background:var(--aidc-border-subtle)!important } html[data-page="canvas"] .board-topbar .pill{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } html[data-page="canvas"] .board-topbar .pill--board-title{ color:var(--aidc-text-primary) } } /* canvas-format-bars.js injects dark literal colors at runtime. The format bar is chrome, not board content, so its controls must follow the app theme. */ html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar, html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar{ background:var(--aidc-bg-popover)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; box-shadow:var(--aidc-shadow-popover)!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(button,select,input), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(button,select,input){ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; border-color:var(--aidc-border-default)!important; background-color:var(--aidc-btn-secondary-bg)!important; opacity:1!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar){ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; opacity:1!important } /* Runtime frame bars also emit plain spans for W/H and preset metadata. */ html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(span,label), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(span,label){ color:var(--aidc-text-secondary)!important; -webkit-text-fill-color:var(--aidc-text-secondary)!important; opacity:1!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(svg,path,line,rect,circle,polyline), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(svg,path,line,rect,circle,polyline){ color:var(--aidc-text-secondary)!important; stroke:currentColor!important; opacity:1!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar select option, html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar select option{ background:var(--aidc-bg-popover)!important; color:var(--aidc-text-primary)!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-sep,.fmt-divider), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-sep,.fmt-divider){ background:var(--aidc-border-default)!important; border-color:var(--aidc-border-default)!important } @media (pointer:coarse){ html[data-page="canvas"] .toolbar[aria-label], html[data-page="canvas"].tg .toolbar[aria-label], html[data-page="canvas"] .board-topbar, html[data-page="canvas"] .zoom-controls{ box-shadow:none } } /* Canvas Dashboard visual adapter. Grid/list geometry and media readability overlays remain legacy-owned. */ .canvas-dashboard .panel, .panel-templates{ background:var(--aidc-bg-panel); border-color:var(--aidc-border-subtle); box-shadow:var(--aidc-shadow-popover) } .boards-grid, .boards-list, .templates-slider, .custom-select__dropdown{ scrollbar-color:var(--aidc-border-default) transparent } .boards-grid::-webkit-scrollbar-thumb, .boards-list::-webkit-scrollbar-thumb, .templates-slider::-webkit-scrollbar-thumb, .custom-select__dropdown::-webkit-scrollbar-thumb{ background:var(--aidc-border-default) } .template-card, .board-card{ background:var(--aidc-bg-card); border-color:var(--aidc-border-subtle) } .template-card:hover, .board-card:hover, .template-card--user:hover{ border-color:var(--aidc-border-strong); box-shadow:var(--aidc-shadow-popover) } .template-card--blank{ border-color:var(--aidc-border-default) } .template-card--blank:hover{ border-color:color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent) } .template-card__thumb, .board-card__thumb{ background:var(--aidc-bg-elevated); color:var(--aidc-text-secondary) } .template-card--blank .template-card__thumb{ background:linear-gradient(135deg,color-mix(in srgb,var(--aidc-action-primary-from) 6%,transparent),color-mix(in srgb,var(--aidc-cyan-500) 4%,transparent)); color:var(--aidc-action-primary-from) } .template-card__label, .panel-user-templates .panel-title, .board-card__title, .col-name .list-title{ color:var(--aidc-text-primary) } .template-card__badge, .board-card__badge{ background:color-mix(in srgb,var(--aidc-bg-popover) 86%,transparent); color:var(--aidc-text-secondary); border-color:var(--aidc-border-default) } .template-card__menu, .board-card__fav, .board-card__menu-btn, .list-fav-btn, .list-menu-btn{ background:color-mix(in srgb,var(--aidc-bg-popover) 82%,transparent); color:var(--aidc-text-muted) } .template-card__menu:hover, .board-card__menu-btn:hover, .list-fav-btn:hover, .list-menu-btn:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } .board-card__fav.active, .board-card__fav.active:hover, .list-fav-btn.active, .list-fav-btn.active:hover{ color:var(--aidc-amber-500) } .boards-filters label, .boards-sort label, .custom-select__arrow, .boards-search-box .search-icon, .board-card__meta, .boards-list-header, .col-users, .col-opened, .col-owner, .boards-empty__text, .boards-loading{ color:var(--aidc-text-muted) } .custom-select__trigger, .boards-search-box input, .board-card__title-input{ background:var(--aidc-bg-elevated); border-color:var(--aidc-border-default); color:var(--aidc-text-primary) } .custom-select__trigger:hover, .custom-select.open .custom-select__trigger, .boards-search-box input:focus, .board-card__title-input:focus{ border-color:var(--aidc-action-focus); box-shadow:0 0 0 3px var(--aidc-action-focus-ring) } .custom-select__dropdown, .board-ctx-menu{ background:var(--aidc-bg-popover); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-popover) } .custom-select__option, .ctx-item{ color:var(--aidc-text-secondary) } .custom-select__option:hover, .ctx-item:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } .custom-select__option.active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent); color:var(--aidc-action-primary-from) } .ctx-item--danger{ color:var(--aidc-red-500) } .ctx-item--danger:hover{ background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent); color:var(--aidc-red-500) } .ctx-divider{ background:var(--aidc-border-subtle) } .view-btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-muted) } .view-btn:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } .view-btn.active{ background:color-mix(in srgb,var(--aidc-cyan-500) 10%,transparent); border-color:color-mix(in srgb,var(--aidc-cyan-500) 34%,transparent); color:var(--aidc-cyan-500) } .boards-list-header, .boards-list-row{ border-color:var(--aidc-border-subtle) } .boards-list-row:hover{ background:var(--aidc-btn-secondary-bg) } .boards-loading .spinner{ border-color:var(--aidc-border-default); border-top-color:var(--aidc-cyan-500) } .board-info-overlay{ background:var(--aidc-backdrop) } .board-info-panel{ background:var(--aidc-bg-panel); border-color:var(--aidc-border-subtle); box-shadow:var(--aidc-shadow-modal) } .tpl-sub-modal-overlay{ background:var(--aidc-backdrop) } .tpl-sub-modal-popup{ background:var(--aidc-bg-modal); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-modal) } .tpl-sub-modal-title, .tpl-sub-modal-card__label{ color:var(--aidc-text-primary) } .tpl-sub-modal-card{ background:var(--aidc-btn-secondary-bg) } .tpl-sub-modal-card:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent) } .tpl-sub-modal-card__icon svg{ color:var(--aidc-text-secondary) } #canvas-rotation-badge{ background:color-mix(in srgb,var(--aidc-bg-popover) 92%,transparent); color:var(--aidc-text-primary); border-color:color-mix(in srgb,var(--aidc-violet-500) 28%,transparent); box-shadow:var(--aidc-shadow-popover) } /* Temporary compatibility layer for hardcoded !important theme rules in canvas/index.html. Remove this file together with the legacy inline theme block during physical HTML cleanup. */ html[data-page="canvas"] body .btn-primary{ background:linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to))!important; color:var(--aidc-text-inverse)!important; border-color:transparent!important; box-shadow:0 0 20px var(--aidc-action-primary-glow)!important } html[data-page="canvas"] body .btn-primary:hover{ box-shadow:0 0 28px var(--aidc-action-primary-glow)!important } html[data-page="canvas"] body .template-card, html[data-page="canvas"] body .board-card{ background:var(--aidc-bg-card)!important } html[data-page="canvas"] body .template-card__thumb, html[data-page="canvas"] body .board-card__thumb{ background:var(--aidc-bg-elevated)!important } html[data-page="canvas"] body .template-card--blank .template-card__thumb{ background:linear-gradient(135deg,color-mix(in srgb,var(--aidc-action-primary-from) 6%,transparent),color-mix(in srgb,var(--aidc-cyan-500) 4%,transparent))!important; color:var(--aidc-action-primary-from)!important } html[data-page="canvas"] body .custom-select__dropdown{ background:var(--aidc-bg-popover)!important } html[data-page="canvas"] body .custom-select__option.active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent)!important; color:var(--aidc-action-primary-from)!important } html[data-page="canvas"] body .board-card__title-input{ border-color:var(--aidc-action-focus)!important; box-shadow:0 0 0 3px var(--aidc-action-focus-ring)!important } /* Canvas Slide Edit visual adapter. Layout and responsive geometry stay legacy-owned. */ .slide-edit-toolbar, .slide-edit-strip, .slide-edit-notes{ background:color-mix(in srgb,var(--aidc-bg-panel) 92%,transparent); border-color:var(--aidc-border-subtle); color:var(--aidc-text-primary) } .slide-edit-back-btn, .slide-edit-tbtn, .mmz-btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } .slide-edit-back-btn:hover, .slide-edit-tbtn:hover, .mmz-btn:hover, .mmz-btn:active{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } .slide-edit-title, .slide-edit-strip__num, .slide-edit-notes__header, .slide-edit-notes__close, .slide-edit-notes__textarea::placeholder{ color:var(--aidc-text-muted) } .slide-edit-tbtn.is-active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent); color:var(--aidc-action-primary-from); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent) } .slide-edit-close:hover{ background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent); color:var(--aidc-red-500); border-color:var(--aidc-action-danger-border) } .slide-edit-strip{ scrollbar-color:var(--aidc-border-default) transparent } .slide-edit-strip::-webkit-scrollbar-thumb{ background:var(--aidc-border-default) } .slide-edit-strip__item:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong) } .slide-edit-strip__item.active{ border-color:var(--aidc-action-primary-from); background:color-mix(in srgb,var(--aidc-action-primary-from) 8%,transparent) } .slide-edit-strip__item.drag-over{ border-color:var(--aidc-violet-500); background:color-mix(in srgb,var(--aidc-violet-500) 10%,transparent) } .slide-edit-strip__preview{ background:var(--aidc-bg-elevated); border-color:var(--aidc-border-subtle) } .slide-edit-strip__label{ color:var(--aidc-text-secondary) } .slide-edit-strip__add{ border-color:var(--aidc-border-default); color:var(--aidc-text-muted) } .slide-edit-strip__add:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } .slide-edit-notes__header{ border-bottom-color:var(--aidc-border-subtle) } .slide-edit-notes__close:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } .slide-edit-notes__textarea{ color:var(--aidc-text-secondary); scrollbar-color:var(--aidc-border-default) transparent } .slide-edit-notes__textarea::-webkit-scrollbar-thumb{ background:var(--aidc-border-default) } .slide-edit-container .mode-mini-zoom{ background:color-mix(in srgb,var(--aidc-bg-popover) 86%,transparent); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary); box-shadow:var(--aidc-shadow-popover) } .mmz-label{ color:var(--aidc-text-secondary) } /* Canvas Focus Mode visual adapter. Layout and mobile positioning stay legacy-owned. */ .focus-mode-topbar, .focus-mode-bottombar{ background:color-mix(in srgb,var(--aidc-bg-panel) 88%,transparent); border-color:var(--aidc-border-subtle); color:var(--aidc-text-primary) } .focus-back-btn, .focus-topbar-btn, .focus-nav-btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } .focus-back-btn:hover, .focus-topbar-btn:hover, .focus-nav-btn:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } .focus-close-btn:hover{ background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent); border-color:var(--aidc-action-danger-border); color:var(--aidc-red-500) } .focus-counter{ color:var(--aidc-text-muted) } .focus-thumb{ color:var(--aidc-text-muted) } .focus-thumb:hover{ border-color:var(--aidc-border-strong); color:var(--aidc-text-secondary) } .focus-thumb.active{ border-color:var(--aidc-action-primary-from); color:var(--aidc-text-primary) } .focus-mini-zoom{ background:color-mix(in srgb,var(--aidc-bg-popover) 86%,transparent); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary); box-shadow:var(--aidc-shadow-popover) } html[data-page="canvas"] .list-fav-btn.active, html[data-page="canvas"] .board-card__fav.active{ color:var(--aidc-amber-500) } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Canvas Brush Studio visual adapter. Brush swatches and texture previews remain tool-owned. */ .brush-studio-backdrop{ background:var(--aidc-backdrop); color:var(--aidc-text-secondary) } .brush-studio-modal{ background:var(--aidc-bg-modal); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-modal) } .bs-header, .bs-sidebar{ background:var(--aidc-bg-panel); border-color:var(--aidc-border-subtle) } .bs-title, .bs-section-title{ color:var(--aidc-text-primary) } .bs-sub-title, .bs-brush-list-title, .bs-testpad-info, .bs-val, .bs-val--mono, .bs-grain-empty, .bs-hint, .bs-empty{ color:var(--aidc-text-muted) } .bs-btn, .bs-testpad-btn, .bs-mode-btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } .bs-btn:hover, .bs-testpad-btn:hover, .bs-mode-btn:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } .bs-btn--primary{ background:linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to)); border-color:transparent; color:var(--aidc-text-inverse); box-shadow:0 0 16px var(--aidc-action-primary-glow) } .bs-btn--primary:hover{ filter:brightness(1.08) } .bs-btn--accent{ background:color-mix(in srgb,var(--aidc-violet-500) 14%,transparent); border-color:color-mix(in srgb,var(--aidc-violet-500) 36%,transparent); color:var(--aidc-violet-500) } .bs-btn--accent:hover{ background:color-mix(in srgb,var(--aidc-violet-500) 22%,transparent); color:var(--aidc-text-primary) } .bs-brush-list, .bs-nav, .bs-section-content{ scrollbar-color:var(--aidc-border-default) transparent } .bs-brush-list::-webkit-scrollbar-thumb, .bs-nav::-webkit-scrollbar-thumb, .bs-section-content::-webkit-scrollbar-thumb{ background:var(--aidc-border-default) } .bs-section-content::-webkit-scrollbar-thumb:hover{ background:var(--aidc-border-strong) } .bs-brush-list-item, .bs-nav-item{ color:var(--aidc-text-muted) } .bs-brush-list-item:hover, .bs-nav-item:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } .bs-brush-list-item.is-active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 10%,transparent); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent); color:var(--aidc-action-primary-from) } .bs-nav-item.is-active{ background:color-mix(in srgb,var(--aidc-violet-500) 14%,transparent); color:var(--aidc-violet-500) } .bs-testpad{ background:var(--aidc-bg-elevated); border-color:var(--aidc-border-subtle) } .bs-testpad canvas{ border-color:var(--aidc-border-default) } .bs-testpad-info b{ color:var(--aidc-text-secondary) } .bs-row .bs-label{ color:var(--aidc-text-secondary) } .bs-slider{ background:var(--aidc-btn-secondary-bg-hover) } .bs-slider::-webkit-slider-thumb, .bs-slider::-moz-range-thumb{ background:var(--aidc-violet-500); border-color:color-mix(in srgb,var(--aidc-text-primary) 30%,transparent) } .bs-slider::-webkit-slider-runnable-track{ background:linear-gradient(to right,color-mix(in srgb,var(--aidc-violet-500) 50%,transparent),color-mix(in srgb,var(--aidc-violet-500) 15%,transparent)) } .bs-toggle-track{ background:var(--aidc-btn-secondary-bg-hover) } .bs-toggle-thumb{ background:var(--aidc-text-muted) } .bs-checkbox:checked + .bs-toggle-track{ background:color-mix(in srgb,var(--aidc-violet-500) 40%,transparent) } .bs-checkbox:checked + .bs-toggle-track .bs-toggle-thumb{ background:var(--aidc-violet-500) } .bs-select, .bs-input{ background:var(--aidc-bg-elevated); border-color:var(--aidc-border-default); color:var(--aidc-text-primary) } .bs-select:focus, .bs-input:focus{ border-color:var(--aidc-action-focus); box-shadow:0 0 0 3px var(--aidc-action-focus-ring) } .bs-select option{ background:var(--aidc-bg-popover); color:var(--aidc-text-primary) } .bs-input::placeholder{ color:var(--aidc-text-muted) } .bs-mode-btn.is-active{ background:color-mix(in srgb,var(--aidc-violet-500) 16%,transparent); border-color:color-mix(in srgb,var(--aidc-violet-500) 36%,transparent); color:var(--aidc-violet-500) } .bs-brush-list-thumb{ background:var(--aidc-bg-elevated) } .bs-toast{ background:var(--aidc-violet-500); color:var(--aidc-text-inverse); box-shadow:var(--aidc-shadow-popover) } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Canvas comments and popup chrome. Comment pin colors, emoji content and sticker artwork remain content-owned. */ html[data-page="canvas"] .comment-dialog{ background:var(--aidc-bg-popover); border-color:var(--aidc-border-default); color:var(--aidc-text-primary); box-shadow:var(--aidc-shadow-popover) } html[data-page="canvas"] .comment-dialog__header, html[data-page="canvas"] .comment-dialog__input, html[data-page="canvas"] .ep-tabs, html[data-page="canvas"] .arrow-type-popup__sep{ border-color:var(--aidc-border-subtle) } html[data-page="canvas"] .comment-dialog__resolve, html[data-page="canvas"] .cd-bell-btn, html[data-page="canvas"] .cd-more-btn, html[data-page="canvas"] .shapes-menu__btn, html[data-page="canvas"] .emoji-popup__btn, html[data-page="canvas"] .ep-sticker-btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } html[data-page="canvas"] .comment-dialog__resolve:hover, html[data-page="canvas"] .cd-bell-btn:hover, html[data-page="canvas"] .cd-more-btn:hover, html[data-page="canvas"] .shapes-menu__btn:hover, html[data-page="canvas"] .emoji-popup__btn:hover, html[data-page="canvas"] .ep-sticker-btn:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } html[data-page="canvas"] .comment-dialog__messages{ scrollbar-color:var(--aidc-border-default) transparent } html[data-page="canvas"] .comment-dialog__messages::-webkit-scrollbar-thumb{ background:var(--aidc-border-default) } html[data-page="canvas"] .comment-dialog__messages::-webkit-scrollbar-thumb:hover{ background:var(--aidc-border-strong) } html[data-page="canvas"] .comment-msg__author, html[data-page="canvas"] .cd-resolve-label, html[data-page="canvas"] .arrow-type-popup__title, html[data-page="canvas"] .ep-sticker-section__title{ color:var(--aidc-text-muted) } html[data-page="canvas"] .comment-msg__text, html[data-page="canvas"] .arrow-type-popup__btn{ color:var(--aidc-text-secondary) } html[data-page="canvas"] .comment-msg__time{ color:var(--aidc-text-muted) } html[data-page="canvas"] .comment-dialog__input input, html[data-page="canvas"] .ep-search{ background:var(--aidc-bg-elevated); border-color:var(--aidc-border-default); color:var(--aidc-text-primary) } html[data-page="canvas"] .comment-dialog__input input:focus, html[data-page="canvas"] .ep-search:focus{ border-color:var(--aidc-action-focus); box-shadow:0 0 0 3px var(--aidc-action-focus-ring); outline:none } html[data-page="canvas"] .comment-dialog__input button{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent); color:var(--aidc-action-primary-from) } html[data-page="canvas"] .comment-dialog__input button:hover{ background:color-mix(in srgb,var(--aidc-action-primary-from) 18%,transparent) } html[data-page="canvas"] .cd-resolve-slider{ background:var(--aidc-btn-secondary-bg-hover) } html[data-page="canvas"] .cd-resolve-slider::after{ background:var(--aidc-text-muted) } html[data-page="canvas"] .cd-resolve-cb:checked + .cd-resolve-slider{ background:color-mix(in srgb,var(--aidc-green-500) 34%,transparent) } html[data-page="canvas"] .cd-resolve-cb:checked + .cd-resolve-slider::after{ background:var(--aidc-green-500) } html[data-page="canvas"] .cd-bell-btn.is-active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent); color:var(--aidc-text-primary) } html[data-page="canvas"] .arrow-type-popup__btn:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } html[data-page="canvas"] .arrow-type-popup__btn.is-selected{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent); color:var(--aidc-action-primary-from) } html[data-page="canvas"] .ep-tab{ color:var(--aidc-text-muted) } html[data-page="canvas"] .ep-tab:hover{ color:var(--aidc-text-primary) } html[data-page="canvas"] .ep-tab.is-active{ color:var(--aidc-action-primary-from); border-bottom-color:var(--aidc-action-primary-from) } html[data-page="canvas"] .ep-search::placeholder{ color:var(--aidc-text-muted) } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Canvas multi-selection and grid settings chrome. Grid swatch colors and custom color picker stay functional/user-owned. */ html[data-page="canvas"] .multi-sel-more-menu, html[data-page="canvas"] .grid-settings-popup{ background:var(--aidc-bg-popover); border-color:var(--aidc-border-default); color:var(--aidc-text-primary); box-shadow:var(--aidc-shadow-popover) } html[data-page="canvas"] .multi-sel-bar__menu-item, html[data-page="canvas"] .multi-sel-more-menu__item, html[data-page="canvas"] .gs-radio-row{ color:var(--aidc-text-secondary) } html[data-page="canvas"] .multi-sel-bar__menu-item:hover, html[data-page="canvas"] .multi-sel-more-menu__item:hover, html[data-page="canvas"] .gs-radio-row:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } html[data-page="canvas"] .multi-sel-bar__menu-item.active, html[data-page="canvas"] .multi-sel-bar__btn.is-active, html[data-page="canvas"] .gs-radio-row.is-active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 40%,transparent); color:var(--aidc-action-primary-from) } html[data-page="canvas"] .multi-sel-bar__menu-count, html[data-page="canvas"] .gs-section-title, html[data-page="canvas"] .gs-radio-icon, html[data-page="canvas"] .gs-toggle-icon{ color:var(--aidc-text-muted) } html[data-page="canvas"] .multi-sel-more-menu__item--danger{ color:var(--aidc-red-500) } html[data-page="canvas"] .multi-sel-more-menu__item--danger:hover{ background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent) } html[data-page="canvas"] .multi-sel-more-menu__sep, html[data-page="canvas"] .gs-sep{ background:var(--aidc-border-subtle) } html[data-page="canvas"] .gs-radio-label, html[data-page="canvas"] .gs-toggle-label{ color:var(--aidc-text-secondary) } html[data-page="canvas"] .gs-radio-dot{ border-color:var(--aidc-border-strong) } html[data-page="canvas"] .gs-radio-row.is-active .gs-radio-dot{ border-color:var(--aidc-action-primary-from) } html[data-page="canvas"] .gs-radio-row.is-active .gs-radio-dot::after{ background:var(--aidc-action-primary-from) } html[data-page="canvas"] .gs-toggle{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-default) } html[data-page="canvas"] .gs-toggle::after{ background:var(--aidc-text-secondary) } html[data-page="canvas"] .gs-toggle.is-on{ background:color-mix(in srgb,var(--aidc-action-primary-from) 24%,transparent); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 46%,transparent) } html[data-page="canvas"] .gs-toggle.is-on::after{ background:var(--aidc-action-primary-from) } html[data-page="canvas"] .gs-color-swatch:hover{ border-color:var(--aidc-border-strong) } html[data-page="canvas"] .gs-color-swatch.is-active, html[data-page="canvas"] .gs-color-custom.is-active{ border-color:var(--aidc-text-primary) } /* Selection status is application chrome, not board content. The old inline pale-blue copy disappeared against light Canvas chrome; semantic tokens own both modes and deliberately override those legacy inline declarations. */ html[data-page="canvas"] .selection-hud, html[data-page="canvas"] .selection-hud__info{ background:var(--aidc-canvas-chrome-bg)!important; border-color:var(--aidc-canvas-chrome-border)!important; color:var(--aidc-canvas-control-text)!important; box-shadow:none!important } html[data-page="canvas"] .selection-hud .label{ color:var(--aidc-text-muted)!important; -webkit-text-fill-color:var(--aidc-text-muted)!important; opacity:1!important } html[data-page="canvas"] #selection-label, html[data-page="canvas"] .selection-hud__info :where(strong,b,[data-selection-label]){ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; opacity:1!important } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Mobile/TG Canvas visual adapter. Responsive geometry and touch behavior remain legacy-owned in canvas-mobile.css. Every selector is route-scoped because this adapter is also re-imported through tg.css to guarantee late cascade ownership on the Canvas route only. */ @media (max-width:1024px){ html[data-page="canvas"].tg .toolbar[aria-label], html[data-page="canvas"] html.tg .toolbar[aria-label]{ background:color-mix(in srgb,var(--aidc-bg-panel) 94%,transparent); border-color:var(--aidc-border-subtle); box-shadow:var(--aidc-shadow-popover) } } @media (max-width:767px){ html[data-page="canvas"].canvas-dashboard-mode .site-header{ border-bottom-color:var(--aidc-border-subtle) } html[data-page="canvas"] .toolbar[aria-label], html[data-page="canvas"] .board-topbar, html[data-page="canvas"] .zoom-controls, html[data-page="canvas"] .hud-panel, html[data-page="canvas"] .multi-sel-bar{ background:color-mix(in srgb,var(--aidc-bg-popover) 94%,transparent); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-popover) } html[data-page="canvas"] .tool-btn, html[data-page="canvas"] .zoom-btn, html[data-page="canvas"] .multi-sel-bar__btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } html[data-page="canvas"] .tool-btn:hover, html[data-page="canvas"] .zoom-btn:hover, html[data-page="canvas"] .multi-sel-bar__btn:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } html[data-page="canvas"] .tool-btn.active, html[data-page="canvas"] .tool-btn.is-active, html[data-page="canvas"] .zoom-btn.active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent); color:var(--aidc-action-primary-from) } html[data-page="canvas"] .shapes-menu, html[data-page="canvas"] .arrow-type-popup, html[data-page="canvas"] .emoji-popup, html[data-page="canvas"] .export-menu, html[data-page="canvas"] .comment-dialog, html[data-page="canvas"] .canvas-ctx-menu, html[data-page="canvas"] .frames-panel, html[data-page="canvas"] .connector-panel, html[data-page="canvas"] .dt-popover, html[data-page="canvas"] .canvas-format-bar, html[data-page="canvas"] .freehand-format-bar{ background:var(--aidc-bg-popover); border-color:var(--aidc-border-default); box-shadow:var(--aidc-shadow-popover); color:var(--aidc-text-primary) } html[data-page="canvas"] .drawing-toolbar{ background:color-mix(in srgb,var(--aidc-bg-popover) 96%,transparent)!important; border-color:var(--aidc-border-default)!important; box-shadow:var(--aidc-shadow-popover)!important } html[data-page="canvas"] .drawing-toolbar .dt-btn{ background:var(--aidc-btn-secondary-bg)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-secondary)!important } html[data-page="canvas"] .drawing-toolbar .dt-btn:hover{ background:var(--aidc-btn-secondary-bg-hover)!important; color:var(--aidc-text-primary)!important } html[data-page="canvas"] .drawing-toolbar .dt-btn.active, html[data-page="canvas"] .drawing-toolbar .dt-btn.is-active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent)!important; color:var(--aidc-action-primary-from)!important; border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent)!important } html[data-page="canvas"] .drawing-toolbar .dt-sep{ background:var(--aidc-border-subtle)!important } html[data-page="canvas"] .board-topbar .pill{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } html[data-page="canvas"] .board-topbar .pill--board-title{ color:var(--aidc-text-primary) } } /* canvas-format-bars.js injects dark literal colors at runtime. The format bar is chrome, not board content, so its controls must follow the app theme. */ html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar, html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar{ background:var(--aidc-bg-popover)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; box-shadow:var(--aidc-shadow-popover)!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(button,select,input), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(button,select,input){ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; border-color:var(--aidc-border-default)!important; background-color:var(--aidc-btn-secondary-bg)!important; opacity:1!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-btn,.fmt-font-btn,.fmt-select,.fmt-input,.fmt-label,.fmt-dim,.fmt-size,.fmt-lock,.fmt-swatch,.fmt-color-btn,.ffb-dim-input,.ffb-lock-ar){ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; opacity:1!important } /* Runtime frame bars also emit plain spans for W/H and preset metadata. */ html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(span,label), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(span,label){ color:var(--aidc-text-secondary)!important; -webkit-text-fill-color:var(--aidc-text-secondary)!important; opacity:1!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(svg,path,line,rect,circle,polyline), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(svg,path,line,rect,circle,polyline){ color:var(--aidc-text-secondary)!important; stroke:currentColor!important; opacity:1!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar select option, html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar select option{ background:var(--aidc-bg-popover)!important; color:var(--aidc-text-primary)!important } html[data-page="canvas"][data-aidc-color-mode="light"] .canvas-format-bar :is(.fmt-sep,.fmt-divider), html[data-page="canvas"][data-aidc-color-mode="light"] .freehand-format-bar :is(.fmt-sep,.fmt-divider){ background:var(--aidc-border-default)!important; border-color:var(--aidc-border-default)!important } @media (pointer:coarse){ html[data-page="canvas"] .toolbar[aria-label], html[data-page="canvas"].tg .toolbar[aria-label], html[data-page="canvas"] .board-topbar, html[data-page="canvas"] .zoom-controls{ box-shadow:none } } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Canvas board visual contract. The large legacy inline block in canvas/index.html still owns geometry and interaction behaviour. This adapter owns board/chrome visuals for BOTH modes. User content colors and custom board backgrounds remain user-owned. */ html[data-page="canvas"] body { background: var(--aidc-bg-page) !important; color: var(--aidc-text-primary) !important; } /* Preserve an explicitly selected --canvas-bg, but make the semantic Canvas token the fallback instead of the historical dark-only literal. */ html[data-page="canvas"] body .board-shell { background: var(--canvas-bg, var(--aidc-canvas-board-bg)) !important; } html[data-page="canvas"] body .board-topbar, html[data-page="canvas"] body .toolbar[aria-label], html[data-page="canvas"] body .hud-panel, html[data-page="canvas"] body .zoom-controls, html[data-page="canvas"] body .drawing-toolbar, html[data-page="canvas"] body .multi-sel-bar { background: var(--aidc-canvas-chrome-bg) !important; border-color: var(--aidc-canvas-chrome-border) !important; color: var(--aidc-canvas-control-text) !important; box-shadow: var(--aidc-shadow-popover) !important; } html[data-page="canvas"] body .pill, html[data-page="canvas"] body .tool-btn, html[data-page="canvas"] body .zoom-btn, html[data-page="canvas"] body .fmt-btn, html[data-page="canvas"] body .anchor-menu__btn, html[data-page="canvas"] body .drawing-toolbar .dt-btn, html[data-page="canvas"] body .multi-sel-bar__btn { background: var(--aidc-canvas-control-bg) !important; border-color: var(--aidc-canvas-chrome-border) !important; color: var(--aidc-canvas-control-text) !important; } html[data-page="canvas"] body .pill:hover, html[data-page="canvas"] body .tool-btn:hover, html[data-page="canvas"] body .zoom-btn:hover, html[data-page="canvas"] body .fmt-btn:hover, html[data-page="canvas"] body .anchor-menu__btn:hover, html[data-page="canvas"] body .drawing-toolbar .dt-btn:hover, html[data-page="canvas"] body .multi-sel-bar__btn:hover { background: var(--aidc-canvas-control-hover) !important; border-color: var(--aidc-border-strong) !important; color: var(--aidc-text-primary) !important; } html[data-page="canvas"] body .tool-btn.active, html[data-page="canvas"] body .tool-btn.is-active, html[data-page="canvas"] body .zoom-btn.active, html[data-page="canvas"] body .zoom-btn.is-active, html[data-page="canvas"] body .drawing-toolbar .dt-btn.active, html[data-page="canvas"] body .drawing-toolbar .dt-btn.is-active, html[data-page="canvas"] body .multi-sel-bar__btn.is-active { background: var(--aidc-canvas-control-active-bg) !important; border-color: var(--aidc-canvas-control-active-border) !important; color: var(--aidc-canvas-control-active-text) !important; box-shadow: 0 0 0 3px var(--aidc-action-focus-ring) !important; } html[data-page="canvas"] body .tool-sep, html[data-page="canvas"] body .zoom-divider, html[data-page="canvas"] body .drawing-toolbar .dt-sep { background: var(--aidc-border-subtle) !important; } html[data-page="canvas"] body .canvas-tooltip, html[data-page="canvas"] body .anchor-menu, html[data-page="canvas"] body .shapes-menu, html[data-page="canvas"] body .arrow-type-popup, html[data-page="canvas"] body .emoji-popup, html[data-page="canvas"] body .export-menu, html[data-page="canvas"] body .comment-dialog, html[data-page="canvas"] body .canvas-ctx-menu, html[data-page="canvas"] body .frames-panel, html[data-page="canvas"] body .connector-panel, html[data-page="canvas"] body .dt-popover, html[data-page="canvas"] body .canvas-format-bar, html[data-page="canvas"] body .freehand-format-bar { background: var(--aidc-bg-popover) !important; border-color: var(--aidc-border-default) !important; color: var(--aidc-text-primary) !important; box-shadow: var(--aidc-shadow-popover) !important; } html[data-page="canvas"] body select, html[data-page="canvas"] body .fmt-select, html[data-page="canvas"] body .conn-select { background-color: var(--aidc-bg-elevated) !important; border-color: var(--aidc-border-default) !important; color: var(--aidc-text-primary) !important; } html[data-page="canvas"] body select:hover, html[data-page="canvas"] body select:focus, html[data-page="canvas"] body .fmt-select:hover, html[data-page="canvas"] body .fmt-select:focus, html[data-page="canvas"] body .conn-select:hover, html[data-page="canvas"] body .conn-select:focus { background-color: var(--aidc-btn-secondary-bg-hover) !important; border-color: var(--aidc-border-strong) !important; } html[data-page="canvas"] body select option, html[data-page="canvas"] body .fmt-select option, html[data-page="canvas"] body .conn-select option { background: var(--aidc-bg-popover) !important; color: var(--aidc-text-primary) !important; } /* Dashboard card footer was a dark-only gradient in the legacy dashboard CSS. */ html[data-page="canvas"] body .board-card__info, html[data-page="canvas"] body .template-card__info { background: linear-gradient( to bottom, color-mix(in srgb, var(--aidc-bg-card) 4%, transparent), var(--aidc-bg-card) 34% ) !important; border-top-color: var(--aidc-border-subtle) !important; color: var(--aidc-text-primary) !important; } html[data-page="canvas"] body .board-card__title, html[data-page="canvas"] body .template-card__title, html[data-page="canvas"] body .board-card__name, html[data-page="canvas"] body .template-card__name { color: var(--aidc-text-primary) !important; } html[data-page="canvas"] body .board-card__meta, html[data-page="canvas"] body .template-card__meta { color: var(--aidc-text-muted) !important; } /* "Мои шаблоны" runtime modal is currently created by canvas-dashboard-enhancements.js with dark inline/injected visuals. Keep its behaviour in JS and move visual ownership here. */ html[data-page="canvas"] body .aidc-tpl-modal { background: var(--aidc-backdrop) !important; } html[data-page="canvas"] body .aidc-tpl-modal__panel { background: var(--aidc-bg-modal) !important; border-color: var(--aidc-border-default) !important; color: var(--aidc-text-primary) !important; box-shadow: var(--aidc-shadow-modal) !important; } html[data-page="canvas"] body .aidc-tpl-modal__title, html[data-page="canvas"] body .aidc-preview-card__name { color: var(--aidc-text-primary) !important; } html[data-page="canvas"] body .aidc-tpl-modal__close, html[data-page="canvas"] body .aidc-preview-card__menu { background: var(--aidc-btn-secondary-bg) !important; border-color: var(--aidc-border-default) !important; color: var(--aidc-text-secondary) !important; } html[data-page="canvas"] body .aidc-tpl-modal__close:hover, html[data-page="canvas"] body .aidc-preview-card__menu:hover { background: var(--aidc-btn-secondary-bg-hover) !important; color: var(--aidc-text-primary) !important; } html[data-page="canvas"] body .aidc-preview-card { background: var(--aidc-bg-card) !important; border-color: var(--aidc-border-subtle) !important; color: var(--aidc-text-primary) !important; } html[data-page="canvas"] body .aidc-preview-card:hover { border-color: var(--aidc-border-strong) !important; } html[data-page="canvas"] body .aidc-preview-card__visual { background: var(--aidc-bg-elevated) !important; border-color: var(--aidc-border-subtle) !important; } html[data-page="canvas"] body .aidc-preview-card__meta, html[data-page="canvas"] body .aidc-tpl-modal__empty { color: var(--aidc-text-muted) !important; } html[data-page="canvas"] body .aidc-tpl-context { background: var(--aidc-bg-popover) !important; border-color: var(--aidc-border-default) !important; color: var(--aidc-text-primary) !important; box-shadow: var(--aidc-shadow-popover) !important; } html[data-page="canvas"] body .aidc-tpl-context button { background: transparent !important; color: var(--aidc-text-secondary) !important; } html[data-page="canvas"] body .aidc-tpl-context button:hover { background: var(--aidc-btn-secondary-bg-hover) !important; color: var(--aidc-text-primary) !important; } html[data-page="canvas"] body .aidc-tpl-context button[data-action="delete"] { color: var(--aidc-red-500) !important; } /* Mini-map is application chrome, not document content. Keep the canvas itself untouched while its shell, close control and viewport indicator follow the shared light/dark contract. */ html[data-page="canvas"] body .canvas-minimap { background: var(--aidc-bg-popover) !important; border: 1px solid var(--aidc-border-default) !important; box-shadow: var(--aidc-shadow-popover) !important; } html[data-page="canvas"] body .minimap-toggle-btn { background: var(--aidc-btn-secondary-bg) !important; border-color: var(--aidc-border-default) !important; color: var(--aidc-text-secondary) !important; } html[data-page="canvas"] body .minimap-toggle-btn:hover { background: var(--aidc-btn-secondary-bg-hover) !important; border-color: var(--aidc-border-strong) !important; color: var(--aidc-text-primary) !important; } html[data-page="canvas"] body .minimap-viewport { border-color: var(--aidc-canvas-control-active-border) !important; background: var(--aidc-canvas-control-active-bg) !important; } html[data-page="canvas"] body .grid-settings-popup :where(.gs-section-title,.gs-radio-label,.gs-toggle-label) { color: var(--aidc-text-secondary) !important; } html[data-page="canvas"] body .grid-settings-popup .gs-section-title { color: var(--aidc-text-muted) !important; } /* Canvas dashboard and board still contain old !important pink CTA rules in the inline legacy sheet. Higher route specificity keeps them within the new application button contract without touching canvas behaviour. */ html[data-aidc-color-mode="light"][data-page="canvas"] body :where(.btn-primary,.pill-btn.primary) { background: var(--aidc-btn-primary-bg) !important; border: 1px solid var(--aidc-btn-primary-border) !important; color: var(--aidc-btn-primary-text) !important; box-shadow: var(--aidc-btn-primary-shadow) !important; filter: none !important; } html[data-aidc-color-mode="light"][data-page="canvas"] body :where(.btn-primary,.pill-btn.primary):hover:not(:disabled) { background: var(--aidc-btn-primary-bg-hover) !important; border-color: var(--aidc-btn-primary-border-hover) !important; color: var(--aidc-btn-primary-text) !important; box-shadow: none !important; filter: none !important; } /* Canvas reuses the TG header/burger component. Geometry and palette come from the same canonical component as every WebApp route. */ /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* AI Design Space — canonical WebApp burger-menu contract. This component owns BOTH geometry and semantic colors for the header menu. Route CSS and light/dark adapters must not resize it. Geometry is intentionally taken from the approved compact dark-theme WebApp menu. Theme switching changes palette only, never width, row height, typography or icon scale. IMPORTANT: geometry is scoped to .tg-dropdown__menu itself instead of relying on a .tg-dropdown--header ancestor. Some WebApp routes temporarily position or portal the menu, and the menu must keep exactly the same scale after that move. */ :root { --aidc-tg-menu-width: 176px; --aidc-tg-menu-max-width: calc(100vw - 20px); --aidc-tg-menu-padding: 4px; --aidc-tg-menu-radius: 10px; --aidc-tg-menu-row-min-height: 32px; --aidc-tg-menu-row-padding-y: 5px; --aidc-tg-menu-row-padding-x: 7px; --aidc-tg-menu-row-gap: 7px; --aidc-tg-menu-row-margin-y: 2px; --aidc-tg-menu-row-radius: 9px; --aidc-tg-menu-font-size: 12px; --aidc-tg-menu-line-height: 1.25; --aidc-tg-menu-icon-box: 18px; --aidc-tg-menu-icon-size: 18px; --aidc-tg-menu-inline-icon-size: 16px; --aidc-tg-menu-section-font-size: 10px; } /* Open burger is global application chrome and must sit above route-local fixed surfaces (for example Projects details at z=1500/1600). Raise the whole header host only while the menu is open, so normal dialogs/overlays keep their usual stacking order when the burger is closed. */ html.tg-menu-open body.aidc-tg #tg-header-root, body.aidc-tg.tg-menu-open #tg-header-root { position: sticky !important; top: 0 !important; z-index: 200020 !important; overflow: visible !important; } html.tg-menu-open body.aidc-tg #tg-header-root .tg-topbar, body.aidc-tg.tg-menu-open #tg-header-root .tg-topbar { z-index: 200021 !important; overflow: visible !important; } html.tg-menu-open body.aidc-tg #tg-header-root .tg-dropdown, body.aidc-tg.tg-menu-open #tg-header-root .tg-dropdown { position: relative !important; z-index: 200022 !important; } html.tg-menu-open body.aidc-tg #tg-header-root .tg-dropdown__menu, body.aidc-tg.tg-menu-open #tg-header-root .tg-dropdown__menu { z-index: 200023 !important; } /* Stable menu shell — same dimensions in light and dark themes, including when the menu is positioned fixed or portalled outside the header container. */ .tg-dropdown__menu { box-sizing: border-box !important; width: min(var(--aidc-tg-menu-width), var(--aidc-tg-menu-max-width)) !important; min-width: 0 !important; max-width: var(--aidc-tg-menu-max-width) !important; max-height: calc(100dvh - 88px) !important; padding: var(--aidc-tg-menu-padding) !important; border-radius: var(--aidc-tg-menu-radius) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--aidc-bg-popover) !important; border: 1px solid var(--aidc-border-default) !important; color: var(--aidc-text-primary) !important; box-shadow: var(--aidc-shadow-popover) !important; opacity: 1 !important; font-family: var(--aidc-font-family-ui) !important; font-size: var(--aidc-tg-menu-font-size) !important; } /* Stable row geometry — no theme-specific grid or enlarged light rows. */ .tg-dropdown__menu .tg-top-btn { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; min-height: var(--aidc-tg-menu-row-min-height) !important; height: auto !important; padding: var(--aidc-tg-menu-row-padding-y) var(--aidc-tg-menu-row-padding-x) !important; margin: var(--aidc-tg-menu-row-margin-y) 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: var(--aidc-tg-menu-row-gap) !important; border-radius: var(--aidc-tg-menu-row-radius) !important; text-align: left !important; background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important; color: var(--aidc-text-secondary) !important; opacity: 1 !important; transform: none !important; font-size: var(--aidc-tg-menu-font-size) !important; line-height: var(--aidc-tg-menu-line-height) !important; } .tg-dropdown__menu .tg-top-btn .tg-svg, .tg-dropdown__menu .tg-top-btn .tg-top-btn__inline-icon { box-sizing: border-box !important; flex: 0 0 var(--aidc-tg-menu-icon-box) !important; width: var(--aidc-tg-menu-icon-box) !important; min-width: var(--aidc-tg-menu-icon-box) !important; max-width: var(--aidc-tg-menu-icon-box) !important; height: var(--aidc-tg-menu-icon-box) !important; min-height: var(--aidc-tg-menu-icon-box) !important; max-height: var(--aidc-tg-menu-icon-box) !important; display: grid !important; place-items: center !important; color: currentColor !important; opacity: 1 !important; } .tg-dropdown__menu .tg-top-btn .tg-svg svg { width: var(--aidc-tg-menu-icon-size) !important; height: var(--aidc-tg-menu-icon-size) !important; min-width: var(--aidc-tg-menu-icon-size) !important; max-width: var(--aidc-tg-menu-icon-size) !important; min-height: var(--aidc-tg-menu-icon-size) !important; max-height: var(--aidc-tg-menu-icon-size) !important; display: block !important; color: currentColor !important; stroke: currentColor !important; filter: none !important; } .tg-dropdown__menu .tg-top-btn .tg-top-btn__inline-icon svg, .tg-dropdown__menu .tg-top-btn > svg { width: var(--aidc-tg-menu-inline-icon-size) !important; height: var(--aidc-tg-menu-inline-icon-size) !important; min-width: var(--aidc-tg-menu-inline-icon-size) !important; max-width: var(--aidc-tg-menu-inline-icon-size) !important; min-height: var(--aidc-tg-menu-inline-icon-size) !important; max-height: var(--aidc-tg-menu-inline-icon-size) !important; display: block !important; flex: 0 0 var(--aidc-tg-menu-inline-icon-size) !important; color: currentColor !important; stroke: currentColor !important; filter: none !important; } .tg-dropdown__menu .tg-top-btn > span:last-child { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: var(--aidc-tg-menu-font-size) !important; line-height: var(--aidc-tg-menu-line-height) !important; letter-spacing: .02em !important; font-weight: 400 !important; text-align: left !important; color: currentColor !important; opacity: 1 !important; -webkit-text-fill-color: currentColor !important; } .tg-dropdown__menu .tg-dropdown__divider { box-sizing: border-box !important; height: 1px !important; margin: 6px 4px !important; border: 0 !important; border-top: 1px solid var(--aidc-border-subtle) !important; background: transparent !important; } .tg-dropdown__menu .tg-dropdown__section-label { box-sizing: border-box !important; padding: 3px 7px 4px !important; margin: 0 !important; font-size: var(--aidc-tg-menu-section-font-size) !important; line-height: 1.25 !important; letter-spacing: .12em !important; text-transform: uppercase !important; white-space: normal !important; color: var(--aidc-text-muted) !important; opacity: 1 !important; } .tg-dropdown__menu .tg-top-btn:hover, .tg-dropdown__menu .tg-top-btn:focus-visible, .tg-dropdown__menu .tg-top-btn:active { background: var(--aidc-btn-secondary-bg-hover) !important; border-color: var(--aidc-border-subtle) !important; color: var(--aidc-text-primary) !important; box-shadow: none !important; outline: none !important; } .tg-dropdown__menu .tg-top-btn.is-active { background: var(--aidc-control-selected-bg) !important; border-color: var(--aidc-control-selected-border) !important; color: var(--aidc-action-primary-from) !important; box-shadow: none !important; } /* Cascade hardening. A previously deployed light-only adapter used a more specific selector and could survive browser HTTP cache after an app update. These rules are mode-agnostic (the attribute may be light OR dark) and repeat only the SAME canonical geometry tokens, so stale theme CSS cannot enlarge rows, icons or typography again. */ html[data-aidc-color-mode] body .tg-dropdown__menu { width: min(var(--aidc-tg-menu-width), var(--aidc-tg-menu-max-width)) !important; min-width: 0 !important; max-width: var(--aidc-tg-menu-max-width) !important; padding: var(--aidc-tg-menu-padding) !important; border-radius: var(--aidc-tg-menu-radius) !important; font-size: var(--aidc-tg-menu-font-size) !important; } html[data-aidc-color-mode] body .tg-dropdown__menu .tg-top-btn { min-height: var(--aidc-tg-menu-row-min-height) !important; height: auto !important; padding: var(--aidc-tg-menu-row-padding-y) var(--aidc-tg-menu-row-padding-x) !important; margin: var(--aidc-tg-menu-row-margin-y) 0 !important; display: flex !important; grid-template-columns: none !important; gap: var(--aidc-tg-menu-row-gap) !important; font-size: var(--aidc-tg-menu-font-size) !important; line-height: var(--aidc-tg-menu-line-height) !important; transform: none !important; } html[data-aidc-color-mode] body .tg-dropdown__menu .tg-top-btn .tg-svg, html[data-aidc-color-mode] body .tg-dropdown__menu .tg-top-btn .tg-top-btn__inline-icon { flex-basis: var(--aidc-tg-menu-icon-box) !important; width: var(--aidc-tg-menu-icon-box) !important; min-width: var(--aidc-tg-menu-icon-box) !important; max-width: var(--aidc-tg-menu-icon-box) !important; height: var(--aidc-tg-menu-icon-box) !important; min-height: var(--aidc-tg-menu-icon-box) !important; max-height: var(--aidc-tg-menu-icon-box) !important; } html[data-aidc-color-mode] body .tg-dropdown__menu .tg-top-btn .tg-svg svg { width: var(--aidc-tg-menu-icon-size) !important; min-width: var(--aidc-tg-menu-icon-size) !important; max-width: var(--aidc-tg-menu-icon-size) !important; height: var(--aidc-tg-menu-icon-size) !important; min-height: var(--aidc-tg-menu-icon-size) !important; max-height: var(--aidc-tg-menu-icon-size) !important; } html[data-aidc-color-mode] body .tg-dropdown__menu .tg-top-btn .tg-top-btn__inline-icon svg, html[data-aidc-color-mode] body .tg-dropdown__menu .tg-top-btn > svg { width: var(--aidc-tg-menu-inline-icon-size) !important; min-width: var(--aidc-tg-menu-inline-icon-size) !important; max-width: var(--aidc-tg-menu-inline-icon-size) !important; height: var(--aidc-tg-menu-inline-icon-size) !important; min-height: var(--aidc-tg-menu-inline-icon-size) !important; max-height: var(--aidc-tg-menu-inline-icon-size) !important; } html[data-aidc-color-mode] body .tg-dropdown__menu .tg-top-btn > span:last-child { font-size: var(--aidc-tg-menu-font-size) !important; line-height: var(--aidc-tg-menu-line-height) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Theme switching is palette-only. These selectors deliberately repeat no geometry values, which prevents light mode from changing menu scale. */ html[data-aidc-color-mode="light"] .tg-dropdown__menu { background: var(--aidc-bg-popover) !important; border-color: var(--aidc-border-default) !important; color: var(--aidc-text-primary) !important; } html[data-aidc-color-mode="light"] .tg-dropdown__menu .tg-top-btn { color: var(--aidc-text-secondary) !important; } html[data-aidc-color-mode="light"] .tg-dropdown__menu .tg-top-btn:hover, html[data-aidc-color-mode="light"] .tg-dropdown__menu .tg-top-btn:focus-visible { color: var(--aidc-text-primary) !important; } html[data-aidc-color-mode="light"] .tg-dropdown__menu .tg-top-btn.is-active { color: var(--aidc-action-primary-to) !important; } /* Selected-object bars, context menus and runtime popovers. */ /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Canonical Canvas object-control contract. Owns geometry and semantic chrome for every selection/action surface. Board content colors are intentionally excluded. */ html[data-page="canvas"]{ --aidc-canvas-control-h:38px; --aidc-canvas-control-radius:10px; --aidc-canvas-menu-row-h:40px; --aidc-canvas-control-gap:4px; --aidc-canvas-icon-size:18px; } /* All object format bars use one control height: frame, media, text, shape, emoji, freehand, connector, callout, multi-selection and mind-map. */ html[data-page="canvas"] :is( .canvas-format-bar, .freehand-format-bar, .mm-format-bar, .connector-panel, .dt-popover, .multi-sel-bar, .drawing-toolbar ){ color:var(--aidc-text-primary)!important; border-color:var(--aidc-border-default)!important; background:var(--aidc-bg-popover)!important; box-shadow:var(--aidc-shadow-popover)!important; } html[data-page="canvas"] :is( .canvas-format-bar, .freehand-format-bar, .mm-format-bar, .connector-panel, .dt-popover, .multi-sel-bar, .drawing-toolbar ) :is(button:not(.fmt-fs-arrow),select,input[type="text"],input[type="number"]){ box-sizing:border-box!important; height:var(--aidc-canvas-control-h)!important; min-height:var(--aidc-canvas-control-h)!important; border-radius:var(--aidc-canvas-control-radius)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; background-color:var(--aidc-btn-secondary-bg)!important; opacity:1!important; line-height:1!important; } /* Icon buttons stay square; text/select controls may remain wider. */ html[data-page="canvas"] :is( .fmt-btn, .mm-fb-btn, .dt-btn, .multi-sel-bar__btn, .ffb-lock-ar ){ min-width:var(--aidc-canvas-control-h)!important; min-height:var(--aidc-canvas-control-h)!important; } html[data-page="canvas"] :is(.ffb-lock-ar,#ffb-fill-btn){ width:var(--aidc-canvas-control-h)!important; height:var(--aidc-canvas-control-h)!important; padding:0!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; } html[data-page="canvas"] :is(.ffb-dim-input,.fmt-select){ height:var(--aidc-canvas-control-h)!important; min-height:var(--aidc-canvas-control-h)!important; } html[data-page="canvas"] .fmt-group, html[data-page="canvas"] .mm-fb-group{ min-height:var(--aidc-canvas-control-h)!important; align-items:center!important; gap:var(--aidc-canvas-control-gap)!important; } html[data-page="canvas"] :is(.fmt-sep,.fmt-divider,.dt-sep){ background:var(--aidc-border-default)!important; border-color:var(--aidc-border-default)!important; } /* Runtime SVG helpers encode stroke/fill intent. Non-filled toolbar icons are always outline icons; explicitly filled helpers retain their fill semantics. */ html[data-page="canvas"] :is( .canvas-format-bar, .freehand-format-bar, .mm-format-bar, .connector-panel, .dt-popover, .multi-sel-bar, .drawing-toolbar ) svg{ width:var(--aidc-canvas-icon-size)!important; height:var(--aidc-canvas-icon-size)!important; color:var(--aidc-text-secondary)!important; opacity:1!important; } html[data-page="canvas"] :is( .canvas-format-bar, .freehand-format-bar, .mm-format-bar, .connector-panel, .dt-popover, .multi-sel-bar, .drawing-toolbar ) svg:not(.svg--filled){ fill:none!important; stroke:currentColor!important; } html[data-page="canvas"] :is( .canvas-format-bar, .freehand-format-bar, .mm-format-bar, .connector-panel, .dt-popover, .multi-sel-bar, .drawing-toolbar ) svg:not(.svg--filled) :is(path,rect,circle,polygon,polyline,line,ellipse){ fill:none!important; stroke:currentColor!important; } html[data-page="canvas"] :is( .canvas-format-bar, .freehand-format-bar, .mm-format-bar ) svg.svg--filled{ fill:currentColor!important; stroke:none!important; } html[data-page="canvas"] :is( .canvas-format-bar, .freehand-format-bar, .mm-format-bar ) svg.svg--filled :is(path,rect,circle,polygon,polyline,ellipse){ fill:currentColor!important; stroke:none!important; } html[data-page="canvas"] #ffb-lock-ar svg, html[data-page="canvas"] #ffb-lock-ar svg :is(path,rect){ fill:none!important; stroke:currentColor!important; stroke-width:1.8!important; } /* Color controls keep the selected color but no longer read as a solid black icon. The real color is shown in a small inset sample inside an outline. */ html[data-page="canvas"] :is(#ffb-fill-sw,#mfb-fill-swatch,[data-swatch="fill"],.fmt-color-swatch:not(.fmt-color-swatch--stroke)){ box-sizing:border-box!important; width:20px!important; height:20px!important; min-width:20px!important; min-height:20px!important; margin:0!important; padding:4px!important; border:2px solid var(--aidc-text-secondary)!important; border-radius:6px!important; background-clip:content-box!important; box-shadow:none!important; } /* Text font-size is one 38px control. The two arrows are nested controls and must split that height instead of inheriting 38px each (which doubled the toolbar height on desktop). */ html[data-page="canvas"] .fmt-fontsize{ box-sizing:border-box!important; height:var(--aidc-canvas-control-h)!important; min-height:var(--aidc-canvas-control-h)!important; display:inline-flex!important; align-items:center!important; gap:0!important; } html[data-page="canvas"] .fmt-fs-val{ height:var(--aidc-canvas-control-h)!important; min-height:var(--aidc-canvas-control-h)!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; line-height:1!important; } html[data-page="canvas"] .fmt-fs-arrows{ box-sizing:border-box!important; width:20px!important; height:var(--aidc-canvas-control-h)!important; min-height:var(--aidc-canvas-control-h)!important; display:flex!important; flex-direction:column!important; align-items:stretch!important; justify-content:center!important; gap:0!important; overflow:hidden!important; border-radius:6px!important; } html[data-page="canvas"] .fmt-fs-arrow{ box-sizing:border-box!important; width:20px!important; min-width:20px!important; height:calc(var(--aidc-canvas-control-h) * .5)!important; min-height:0!important; max-height:calc(var(--aidc-canvas-control-h) * .5)!important; padding:0!important; margin:0!important; display:flex!important; align-items:center!important; justify-content:center!important; border:0!important; border-radius:0!important; background:var(--aidc-btn-secondary-bg)!important; color:var(--aidc-text-secondary)!important; -webkit-text-fill-color:var(--aidc-text-secondary)!important; line-height:1!important; flex:1 1 50%!important; } html[data-page="canvas"] .fmt-fs-arrow--up{border-radius:6px 6px 0 0!important} html[data-page="canvas"] .fmt-fs-arrow--dn{border-radius:0 0 6px 6px!important} html[data-page="canvas"] .fmt-fs-arrow:hover, html[data-page="canvas"] .fmt-fs-arrow:focus-visible{ background:var(--aidc-btn-secondary-bg-hover)!important; color:var(--aidc-text-primary)!important; outline:none!important; } html[data-page="canvas"] .fmt-fs-arrow svg{ width:10px!important; height:6px!important; min-width:10px!important; min-height:6px!important; } /* Keep every object bar centered around the same baseline. */ html[data-page="canvas"] :is(.canvas-format-bar,.freehand-format-bar,.mm-format-bar){ box-sizing:border-box!important; align-items:center!important; gap:var(--aidc-canvas-control-gap)!important; padding:5px 8px!important; min-height:calc(var(--aidc-canvas-control-h) + 10px)!important; } /* Plain labels W/H, dimensions and metadata must remain readable. */ html[data-page="canvas"] :is( .canvas-format-bar, .freehand-format-bar, .mm-format-bar, .connector-panel, .dt-popover ) :is(span,label,.fmt-label,.ffb-dim-label,.ffb-dim-x){ color:var(--aidc-text-secondary)!important; -webkit-text-fill-color:var(--aidc-text-secondary)!important; opacity:1!important; } /* Frame preset popup is appended to body with inline dark styles. */ html[data-page="canvas"] #ffb-preset-list{ background:var(--aidc-bg-popover)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; box-shadow:var(--aidc-shadow-popover)!important; } html[data-page="canvas"] #ffb-preset-list [data-value]{ box-sizing:border-box!important; min-height:var(--aidc-canvas-menu-row-h)!important; padding:0 12px!important; display:flex!important; align-items:center!important; border-radius:8px!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; } /* Shared text/mind-map submenus and object popovers. */ html[data-page="canvas"] :is( .te-submenu, .mm-submenu, .fmt-leader-line-picker, .frame-preset-menu, .remove-bg-panel, .anchor-menu, .shapes-menu, .arrow-type-popup, .emoji-popup, .export-menu ){ background:var(--aidc-bg-popover)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; box-shadow:var(--aidc-shadow-popover)!important; } html[data-page="canvas"] :is(.te-submenu-item,.mm-submenu button,.frame-preset-menu button,.remove-bg-panel button,.anchor-menu__btn){ box-sizing:border-box!important; min-height:var(--aidc-canvas-menu-row-h)!important; border-radius:8px!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; } /* Canonical long-press / three-dot object menu. The legacy inline stylesheet hardcodes dark text; this layer owns both themes and disabled visibility. */ html[data-page="canvas"] .canvas-ctx-menu{ background:var(--aidc-bg-popover)!important; border:1px solid var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; box-shadow:var(--aidc-shadow-popover)!important; padding:6px!important; } html[data-page="canvas"] .canvas-ctx-menu button{ box-sizing:border-box!important; width:100%!important; min-height:var(--aidc-canvas-menu-row-h)!important; height:var(--aidc-canvas-menu-row-h)!important; padding:0 12px!important; border:1px solid transparent!important; border-radius:8px!important; background:transparent!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; font-size:14px!important; line-height:1.15!important; opacity:1!important; } html[data-page="canvas"] .canvas-ctx-menu button:hover, html[data-page="canvas"] .canvas-ctx-menu button:focus-visible{ background:var(--aidc-btn-secondary-bg-hover)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; outline:none!important; } html[data-page="canvas"] .canvas-ctx-menu button:disabled, html[data-page="canvas"] .canvas-ctx-menu button[aria-disabled="true"]{ color:var(--aidc-text-muted)!important; -webkit-text-fill-color:var(--aidc-text-muted)!important; opacity:.62!important; } html[data-page="canvas"] .canvas-ctx-menu button svg{ width:18px!important; height:18px!important; min-width:18px!important; color:var(--aidc-text-secondary)!important; fill:none!important; stroke:currentColor!important; opacity:1!important; } html[data-page="canvas"] .canvas-ctx-menu button svg :is(path,rect,circle,polygon,polyline,line,ellipse){ fill:none!important; stroke:currentColor!important; } html[data-page="canvas"] .canvas-ctx-menu .ctx-shortcut{ margin-left:auto!important; color:var(--aidc-text-muted)!important; -webkit-text-fill-color:var(--aidc-text-muted)!important; font-size:12px!important; opacity:1!important; } html[data-page="canvas"] .canvas-ctx-menu .canvas-ctx-danger{ color:var(--aidc-red-500)!important; -webkit-text-fill-color:var(--aidc-red-500)!important; } html[data-page="canvas"] .canvas-ctx-menu .canvas-ctx-danger svg{ color:var(--aidc-red-500)!important; } html[data-page="canvas"] .canvas-ctx-sep{ background:var(--aidc-border-subtle)!important; } /* Light mode: neutral controls are never solid black; active controls use the selection token rather than a dark legacy fill. */ html[data-page="canvas"][data-aidc-color-mode="light"] :is( .canvas-format-bar, .freehand-format-bar, .mm-format-bar, .connector-panel, .dt-popover, .multi-sel-bar, .drawing-toolbar ) :is(button:not(.fmt-fs-arrow),select,input[type="text"],input[type="number"]){ background-color:var(--aidc-btn-secondary-bg)!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; } html[data-page="canvas"][data-aidc-color-mode="light"] :is( .fmt-btn.is-active, .mm-fb-btn.is-active, .dt-btn.active, .dt-btn.is-active, .ffb-lock-ar.is-active ){ background:var(--aidc-workspace-selection-bg)!important; border-color:var(--aidc-workspace-selection-border)!important; color:var(--aidc-action-primary-to)!important; -webkit-text-fill-color:var(--aidc-action-primary-to)!important; box-shadow:none!important; } /* Final standard for every object-specific control generated by canvas-format-bars. Nested font-size arrows are explicitly excluded: together they form one control. */ html[data-page="canvas"] :is(.canvas-format-bar,.freehand-format-bar,.mm-format-bar) > :is(button:not(.fmt-fs-arrow),select,input), html[data-page="canvas"] :is(.canvas-format-bar,.freehand-format-bar,.mm-format-bar) :is( button:not(.fmt-fs-arrow), [role="button"], .fmt-btn, .fmt-font-btn, .fmt-select, .fmt-input, .ffb-lock-ar, .ffb-dim-input, #ffb-fill-btn, [data-swatch], [data-action][type="button"] ){ box-sizing:border-box!important; height:var(--aidc-canvas-control-h)!important; min-height:var(--aidc-canvas-control-h)!important; border-radius:var(--aidc-canvas-control-radius)!important; } html[data-page="canvas"] :is(.canvas-format-bar,.freehand-format-bar,.mm-format-bar) :is( .fmt-btn, .ffb-lock-ar, #ffb-fill-btn, [data-swatch], button[aria-label]:not(.fmt-font-btn):not(.fmt-fs-arrow) ){ width:var(--aidc-canvas-control-h)!important; min-width:var(--aidc-canvas-control-h)!important; padding:0!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; } html[data-page="canvas"] :is(.canvas-format-bar,.freehand-format-bar,.mm-format-bar) :is(.fmt-swatch,[data-swatch])::before, html[data-page="canvas"] :is(.canvas-format-bar,.freehand-format-bar,.mm-format-bar) :is(.fmt-swatch,[data-swatch])::after{ max-width:24px!important; max-height:24px!important; } /* Every object dropdown/menu uses the same row geometry. */ html[data-page="canvas"] :is( .canvas-ctx-menu, .export-menu, .anchor-menu, .te-submenu, .mm-submenu, .fmt-leader-line-picker, .frame-preset-menu, .remove-bg-panel, .arrow-type-popup, .shapes-menu, #ffb-preset-list ) :is(button,[role="menuitem"],[data-value]){ box-sizing:border-box!important; min-height:var(--aidc-canvas-menu-row-h)!important; height:var(--aidc-canvas-menu-row-h)!important; padding-block:0!important; display:flex!important; align-items:center!important; } /* Final light-theme floor for context/dropdown text. This intentionally has higher specificity than the dark inline rules in canvas/index.html. */ html[data-page="canvas"][data-aidc-color-mode="light"] body :is( .canvas-ctx-menu, .export-menu, .anchor-menu, .te-submenu, .mm-submenu, .fmt-leader-line-picker, .frame-preset-menu, .remove-bg-panel, .arrow-type-popup, .shapes-menu, #ffb-preset-list ){ background:var(--aidc-bg-popover)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; } html[data-page="canvas"][data-aidc-color-mode="light"] body :is( .canvas-ctx-menu, .export-menu, .anchor-menu, .te-submenu, .mm-submenu, .fmt-leader-line-picker, .frame-preset-menu, .remove-bg-panel, .arrow-type-popup, .shapes-menu, #ffb-preset-list ) :is(button,[role="menuitem"],[data-value]){ background:transparent!important; border-color:transparent!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; opacity:1!important; } html[data-page="canvas"][data-aidc-color-mode="light"] body :is( .canvas-ctx-menu, .export-menu, .anchor-menu, .te-submenu, .mm-submenu, .fmt-leader-line-picker, .frame-preset-menu, .remove-bg-panel, .arrow-type-popup, .shapes-menu, #ffb-preset-list ) :is(button,[role="menuitem"],[data-value]):is(:hover,:focus-visible){ background:var(--aidc-btn-secondary-bg-hover)!important; border-color:var(--aidc-border-default)!important; } html[data-page="canvas"][data-aidc-color-mode="light"] body .canvas-ctx-menu :is(span,strong,.ctx-shortcut){ color:inherit!important; -webkit-text-fill-color:inherit!important; opacity:1!important; } html[data-page="canvas"][data-aidc-color-mode="light"] body .canvas-ctx-menu button:disabled{ color:var(--aidc-text-muted)!important; -webkit-text-fill-color:var(--aidc-text-muted)!important; opacity:.62!important; } html[data-page="canvas"][data-aidc-color-mode="light"] body .canvas-ctx-menu .canvas-ctx-danger{ color:var(--aidc-red-500)!important; -webkit-text-fill-color:var(--aidc-red-500)!important; } @media (max-width:767px){ html[data-page="canvas"]{ --aidc-canvas-control-h:42px; --aidc-canvas-menu-row-h:44px; --aidc-canvas-control-gap:5px; --aidc-canvas-icon-size:20px; } html[data-page="canvas"] :is(.canvas-format-bar,.freehand-format-bar,.mm-format-bar){ max-width:calc(100vw - 16px)!important; overflow-x:auto!important; overflow-y:hidden!important; scrollbar-width:none!important; gap:var(--aidc-canvas-control-gap)!important; } html[data-page="canvas"] :is(.canvas-format-bar,.freehand-format-bar,.mm-format-bar)::-webkit-scrollbar{ display:none!important; } html[data-page="canvas"] .canvas-ctx-menu{ min-width:min(320px,calc(100vw - 24px))!important; } html[data-page="canvas"] .canvas-ctx-menu button{ font-size:14px!important; gap:10px!important; } } /* Runtime popups that still inject dark inline styles. */ /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Canvas popover finalization. Runtime modules still create several menus with dark inline styles. This is the last Canvas visual ownership layer and intentionally wins over those literals without changing document/content colors. */ html[data-page="canvas"]{ --aidc-canvas-popup-row-h:40px; --aidc-canvas-popup-radius:12px; } /* One semantic surface for every Canvas application menu/popover. */ html[data-page="canvas"] body :is( #ffb-color-popup, #ffb-preset-list, #mm-template-popup, .te-submenu, .mm-submenu, .fmt-leader-line-picker, .frame-preset-menu, .remove-bg-panel, .arrow-type-popup, .shapes-menu, .anchor-menu, .export-menu, .emoji-popup, .grid-settings-popup, .connector-panel, .dt-popover, .comment-dialog, .canvas-ctx-menu, .custom-select__dropdown, .cb-insert-dropdown, .canvas-connector-bar ){ background:var(--aidc-bg-popover)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; box-shadow:var(--aidc-shadow-popover)!important; } /* Strong, visible press/selected state for every selected-object toolbar. */ html[data-page="canvas"] body :is( .canvas-format-bar, .freehand-format-bar, .mm-format-bar, .drawing-toolbar, .multi-sel-bar ) :is( .fmt-btn, .ffb-lock-ar, .mm-fb-btn, .dt-btn, .multi-sel-bar__btn, button[aria-pressed="true"], button.is-active, button.active ):is(.is-active,.active,[aria-pressed="true"]){ background:var(--aidc-workspace-selection-bg)!important; border-color:var(--aidc-workspace-selection-border)!important; color:var(--aidc-action-primary-to)!important; -webkit-text-fill-color:var(--aidc-action-primary-to)!important; box-shadow:inset 0 0 0 1px var(--aidc-workspace-selection-border)!important; } html[data-page="canvas"] body :is( .canvas-format-bar, .freehand-format-bar, .mm-format-bar, .drawing-toolbar, .multi-sel-bar ) :is(.fmt-btn,.ffb-lock-ar,.mm-fb-btn,.dt-btn,.multi-sel-bar__btn):active{ background:var(--aidc-workspace-selection-bg)!important; border-color:var(--aidc-workspace-selection-border)!important; color:var(--aidc-action-primary-to)!important; transform:translateY(1px); } /* ------------------------------------------------------------------------- Frame background popup (#ffb-color-popup) ------------------------------------------------------------------------- */ html[data-page="canvas"] body #ffb-color-popup{ background:var(--aidc-bg-popover)!important; border:1px solid var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; box-shadow:var(--aidc-shadow-popover)!important; } html[data-page="canvas"] body #ffb-color-popup > div:first-child, html[data-page="canvas"] body #ffb-color-popup label{ color:var(--aidc-text-secondary)!important; -webkit-text-fill-color:var(--aidc-text-secondary)!important; opacity:1!important; } html[data-page="canvas"] body #ffb-color-popup :is(#ffb-eyedropper,#ffb-clear-fill){ box-sizing:border-box!important; min-height:32px!important; padding:0 10px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; background:var(--aidc-btn-secondary-bg)!important; border:1px solid var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; border-radius:8px!important; opacity:1!important; } html[data-page="canvas"] body #ffb-color-popup :is(#ffb-eyedropper,#ffb-clear-fill):hover{ background:var(--aidc-btn-secondary-bg-hover)!important; border-color:var(--aidc-border-strong)!important; } html[data-page="canvas"] body #ffb-color-popup #ffb-eyedropper svg, html[data-page="canvas"] body #ffb-color-popup #ffb-eyedropper svg :is(path,rect,line,polyline,circle){ color:var(--aidc-text-secondary)!important; stroke:currentColor!important; fill:none!important; } html[data-page="canvas"] body #ffb-color-presets > *{ border:1px solid var(--aidc-border-strong)!important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--aidc-bg-page) 15%,transparent)!important; } html[data-page="canvas"] body #ffb-custom-color{ border:1px solid var(--aidc-border-strong)!important; background:var(--aidc-bg-elevated)!important; } /* ------------------------------------------------------------------------- Frame preset list rendered directly in body. ------------------------------------------------------------------------- */ html[data-page="canvas"] body #ffb-preset-list{ background:var(--aidc-bg-popover)!important; border:1px solid var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; scrollbar-color:var(--aidc-scrollbar-thumb) transparent!important; } html[data-page="canvas"] body #ffb-preset-list [data-value]{ box-sizing:border-box!important; min-height:var(--aidc-canvas-popup-row-h)!important; margin:2px 4px!important; padding:0 12px!important; display:flex!important; align-items:center!important; border:1px solid transparent!important; border-radius:8px!important; background:transparent!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; opacity:1!important; } html[data-page="canvas"] body #ffb-preset-list [data-value]:hover{ background:var(--aidc-btn-secondary-bg-hover)!important; border-color:var(--aidc-border-default)!important; } html[data-page="canvas"] body #ffb-preset-list [data-value][style*="#ff008c"]{ background:var(--aidc-workspace-selection-bg)!important; border-color:var(--aidc-workspace-selection-border)!important; color:var(--aidc-action-primary-to)!important; -webkit-text-fill-color:var(--aidc-action-primary-to)!important; } /* ------------------------------------------------------------------------- Shared text/stroke picker. Inline headings and active line/corner buttons still use dark-theme literals in canvas-text-editor.js. ------------------------------------------------------------------------- */ html[data-page="canvas"] body .te-submenu{ background:var(--aidc-bg-popover)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; } html[data-page="canvas"] body .te-submenu :is( .te-submenu-item, .te-font-item, .te-font-add-btn, .te-eyedropper-btn ){ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; border-color:transparent!important; opacity:1!important; } html[data-page="canvas"] body .te-submenu :is(.te-submenu-item,.te-font-item):hover{ background:var(--aidc-btn-secondary-bg-hover)!important; border-color:var(--aidc-border-default)!important; } html[data-page="canvas"] body .te-submenu .te-submenu-item.is-active, html[data-page="canvas"] body .te-submenu .te-submenu-item[style*="rgba(111,124,255,0.22)"], html[data-page="canvas"] body .te-submenu .te-submenu-item[style*="rgba(111, 124, 255, 0.22)"]{ background:var(--aidc-workspace-selection-bg)!important; border-color:var(--aidc-workspace-selection-border)!important; color:var(--aidc-action-primary-to)!important; -webkit-text-fill-color:var(--aidc-action-primary-to)!important; } html[data-page="canvas"] body .te-submenu :is( div[style*="color:#a0a8c0"], div[style*="color: #a0a8c0"], span[style*="color:#a0a8c0"], span[style*="color: #a0a8c0"] ){ color:var(--aidc-text-secondary)!important; -webkit-text-fill-color:var(--aidc-text-secondary)!important; opacity:1!important; } html[data-page="canvas"] body .te-submenu .te-submenu-item svg:not(.svg--filled), html[data-page="canvas"] body .te-submenu .te-submenu-item svg:not(.svg--filled) :is(path,rect,circle,line,polyline,polygon,ellipse){ color:var(--aidc-text-secondary)!important; stroke:currentColor!important; fill:none!important; opacity:1!important; } /* Color swatches keep their real fill, but receive a visible outline. */ html[data-page="canvas"] body .te-submenu button[style*="background"]:not(.te-submenu-item){ border-color:var(--aidc-border-strong)!important; } /* ------------------------------------------------------------------------- Arrow type popup from canvas/index.html. Its SVG paths carry inline #e4e8f8. ------------------------------------------------------------------------- */ html[data-page="canvas"] body .arrow-type-popup{ background:var(--aidc-bg-popover)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; } html[data-page="canvas"] body .arrow-type-popup__title{ color:var(--aidc-text-secondary)!important; -webkit-text-fill-color:var(--aidc-text-secondary)!important; opacity:1!important; } html[data-page="canvas"] body .arrow-type-popup__btn{ box-sizing:border-box!important; min-height:var(--aidc-canvas-popup-row-h)!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; background:transparent!important; border:1px solid transparent!important; border-radius:8px!important; opacity:1!important; } html[data-page="canvas"] body .arrow-type-popup__btn:hover{ background:var(--aidc-btn-secondary-bg-hover)!important; border-color:var(--aidc-border-default)!important; } html[data-page="canvas"] body .arrow-type-popup__btn.is-selected{ background:var(--aidc-workspace-selection-bg)!important; border-color:var(--aidc-workspace-selection-border)!important; color:var(--aidc-action-primary-to)!important; -webkit-text-fill-color:var(--aidc-action-primary-to)!important; } html[data-page="canvas"] body .arrow-type-popup__btn svg, html[data-page="canvas"] body .arrow-type-popup__btn svg :is(path,line,polyline,rect,circle,polygon){ color:var(--aidc-text-secondary)!important; stroke:currentColor!important; fill:none!important; opacity:1!important; } html[data-page="canvas"] body .arrow-type-popup__btn.is-selected svg, html[data-page="canvas"] body .arrow-type-popup__btn.is-selected svg :is(path,line,polyline,rect,circle,polygon){ color:var(--aidc-action-primary-to)!important; } html[data-page="canvas"] body .arrow-type-popup__sep{ background:var(--aidc-border-subtle)!important; } /* Shapes/export/anchor menus use the same row and icon rules. */ html[data-page="canvas"] body :is(.shapes-menu__btn,.export-menu__btn,.anchor-menu__btn){ box-sizing:border-box!important; min-height:var(--aidc-canvas-popup-row-h)!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; background:transparent!important; border-color:transparent!important; opacity:1!important; } html[data-page="canvas"] body :is(.shapes-menu__btn,.export-menu__btn,.anchor-menu__btn):hover{ background:var(--aidc-btn-secondary-bg-hover)!important; border-color:var(--aidc-border-default)!important; } html[data-page="canvas"] body :is(.shapes-menu__btn,.export-menu__btn,.anchor-menu__btn) svg{ color:var(--aidc-text-secondary)!important; opacity:1!important; } /* ------------------------------------------------------------------------- Mind-map template picker created by canvas-mindmap.js with inline dark styles. Keep preview artwork untouched; only popup chrome/cards/labels are themed. ------------------------------------------------------------------------- */ html[data-page="canvas"] body #mm-template-popup{ background:var(--aidc-bg-popover)!important; border:1px solid var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; box-shadow:var(--aidc-shadow-popover)!important; } html[data-page="canvas"] body #mm-template-popup > div:first-child{ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; opacity:1!important; } html[data-page="canvas"] body #mm-template-popup > div:nth-child(2) > div{ background:var(--aidc-bg-elevated)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; } html[data-page="canvas"] body #mm-template-popup > div:nth-child(2) > div:hover{ background:var(--aidc-btn-secondary-bg-hover)!important; border-color:var(--aidc-workspace-selection-border)!important; } html[data-page="canvas"] body #mm-template-popup > div:nth-child(2) > div > div:last-child{ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; opacity:1!important; } /* Dashboard/custom selects and remaining Canvas chrome dropdowns. */ html[data-page="canvas"] body .custom-select__dropdown{ background:var(--aidc-bg-popover)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; } html[data-page="canvas"] body .custom-select__option{ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; background:transparent!important; } html[data-page="canvas"] body .custom-select__option:hover{ background:var(--aidc-btn-secondary-bg-hover)!important; } html[data-page="canvas"] body .custom-select__option.active{ background:var(--aidc-workspace-selection-bg)!important; color:var(--aidc-action-primary-to)!important; -webkit-text-fill-color:var(--aidc-action-primary-to)!important; } /* Final light-mode specificity floor. This beats legacy inline dark literals while preserving semantic dark mode through the same token contract. */ html[data-page="canvas"][data-aidc-color-mode="light"] body :is( #ffb-color-popup, #ffb-preset-list, #mm-template-popup, .te-submenu, .mm-submenu, .fmt-leader-line-picker, .frame-preset-menu, .remove-bg-panel, .arrow-type-popup, .shapes-menu, .anchor-menu, .export-menu, .emoji-popup, .grid-settings-popup, .connector-panel, .dt-popover, .comment-dialog, .canvas-ctx-menu, .custom-select__dropdown, .cb-insert-dropdown, .canvas-connector-bar ){ background:var(--aidc-bg-popover)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; opacity:1!important; } @media (max-width:767px){ html[data-page="canvas"]{--aidc-canvas-popup-row-h:44px} } /* Absolute final audit for late-injected tab/connector/frame menu CSS. */ /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Runtime menu audit: modules that inject their own dark CSS after page load. This file is intentionally the final Canvas import. */ /* Board tabs: add menu, tab context menu and existing-board picker. */ html[data-page="canvas"] body :is(.canvas-tab-ctxmenu,.canvas-board-picker){ background:var(--aidc-bg-popover)!important; border:1px solid var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; box-shadow:var(--aidc-shadow-popover)!important; } html[data-page="canvas"] body .canvas-tab-ctxmenu button, html[data-page="canvas"] body .canvas-board-picker__item{ box-sizing:border-box!important; min-height:40px!important; padding:0 14px!important; display:flex!important; align-items:center!important; gap:8px!important; background:transparent!important; border:1px solid transparent!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; border-radius:8px!important; opacity:1!important; } html[data-page="canvas"] body .canvas-tab-ctxmenu button:hover, html[data-page="canvas"] body .canvas-board-picker__item:hover{ background:var(--aidc-btn-secondary-bg-hover)!important; border-color:var(--aidc-border-default)!important; } html[data-page="canvas"] body .canvas-tab-ctxmenu button.danger{ color:var(--aidc-red-500)!important; -webkit-text-fill-color:var(--aidc-red-500)!important; } html[data-page="canvas"] body .canvas-tab-ctxmenu button svg{ color:var(--aidc-text-secondary)!important; stroke:currentColor!important; } html[data-page="canvas"] body .canvas-board-picker__search{ box-sizing:border-box!important; min-height:36px!important; background:var(--aidc-bg-elevated)!important; border:1px solid var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; border-radius:8px!important; } html[data-page="canvas"] body .canvas-board-picker__search::placeholder, html[data-page="canvas"] body :is(.canvas-board-picker__loading,.canvas-board-picker__empty,.canvas-board-picker__date){ color:var(--aidc-text-muted)!important; -webkit-text-fill-color:var(--aidc-text-muted)!important; opacity:1!important; } html[data-page="canvas"] body .canvas-board-picker__title{ color:var(--aidc-text-primary)!important; } /* Connector toolbar/dropdowns. */ html[data-page="canvas"] body :is(.canvas-connector-bar,.cb-more-dropdown,.cb-insert-dropdown){ background:var(--aidc-bg-popover)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; box-shadow:var(--aidc-shadow-popover)!important; } html[data-page="canvas"] body .canvas-connector-bar .cb-btn{ box-sizing:border-box!important; width:38px!important; height:38px!important; min-width:38px!important; min-height:38px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; padding:0!important; border:1px solid var(--aidc-border-default)!important; border-radius:10px!important; background:var(--aidc-btn-secondary-bg)!important; color:var(--aidc-text-secondary)!important; } html[data-page="canvas"] body .canvas-connector-bar .cb-btn:hover{ background:var(--aidc-btn-secondary-bg-hover)!important; color:var(--aidc-text-primary)!important; } html[data-page="canvas"] body .canvas-connector-bar .cb-btn:is(.is-active,.active,[aria-pressed="true"]){ background:var(--aidc-workspace-selection-bg)!important; border-color:var(--aidc-workspace-selection-border)!important; color:var(--aidc-action-primary-to)!important; } html[data-page="canvas"] body .canvas-connector-bar .cb-btn svg, html[data-page="canvas"] body .canvas-connector-bar .cb-btn svg :is(path,line,polyline,rect,circle,polygon){ color:inherit!important; stroke:currentColor!important; fill:none!important; } html[data-page="canvas"] body :is(.cb-more-item,.cb-insert-btn){ box-sizing:border-box!important; min-height:40px!important; display:flex!important; align-items:center!important; background:transparent!important; border:1px solid transparent!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; opacity:1!important; } html[data-page="canvas"] body :is(.cb-more-item,.cb-insert-btn):hover{ background:var(--aidc-btn-secondary-bg-hover)!important; border-color:var(--aidc-border-default)!important; } html[data-page="canvas"] body .cb-more-item span, html[data-page="canvas"] body .cb-insert-dropdown > div:first-child{ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; } html[data-page="canvas"] body :is(.cb-shortcut,.cb-insert-dropdown > div:first-child){ color:var(--aidc-text-muted)!important; -webkit-text-fill-color:var(--aidc-text-muted)!important; opacity:1!important; } html[data-page="canvas"] body :is(.cb-more-sep,.cb-insert-dropdown hr){ background:var(--aidc-border-subtle)!important; border-color:var(--aidc-border-subtle)!important; } html[data-page="canvas"] body .cb-insert-btn svg, html[data-page="canvas"] body .cb-insert-btn svg :is(path,line,polyline,rect,circle,polygon){ color:var(--aidc-text-secondary)!important; stroke:currentColor!important; fill:none!important; } /* Frames side panel is application chrome and is injected with dark literals. */ html[data-page="canvas"] body .frames-panel{ background:var(--aidc-bg-panel)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; box-shadow:var(--aidc-shadow-modal)!important; } html[data-page="canvas"] body :is(.frames-panel__header,.frames-panel__footer){ border-color:var(--aidc-border-subtle)!important; } html[data-page="canvas"] body :is(.frames-panel__title,.frames-panel__name){ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; } html[data-page="canvas"] body :is(.frames-panel__select-all-label,.frames-panel__size,.frames-panel__num,.frames-panel__selection-info,.frames-panel__sel-count){ color:var(--aidc-text-secondary)!important; -webkit-text-fill-color:var(--aidc-text-secondary)!important; } html[data-page="canvas"] body .frames-panel__item{ background:var(--aidc-bg-elevated)!important; border-color:var(--aidc-border-subtle)!important; } html[data-page="canvas"] body .frames-panel__item:hover{ background:var(--aidc-btn-secondary-bg-hover)!important; border-color:var(--aidc-border-strong)!important; } html[data-page="canvas"] body .frames-panel__item:is(.is-active,.is-selected){ background:var(--aidc-workspace-selection-bg)!important; border-color:var(--aidc-workspace-selection-border)!important; } html[data-page="canvas"] body :is( .frames-panel__close, .frames-panel__slides-btn, .frames-panel__play-btn, .frames-panel__focus-btn, .frames-panel__menu-btn, .frames-panel__export-png, .frames-panel__export-pdf, .frames-panel__export-assets, .frames-panel__add ){ background:var(--aidc-btn-secondary-bg)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-secondary)!important; -webkit-text-fill-color:var(--aidc-text-secondary)!important; } html[data-page="canvas"] body :is( .frames-panel__close, .frames-panel__slides-btn, .frames-panel__play-btn, .frames-panel__focus-btn, .frames-panel__menu-btn, .frames-panel__export-png, .frames-panel__export-pdf, .frames-panel__export-assets, .frames-panel__add ):hover:not(:disabled){ background:var(--aidc-btn-secondary-bg-hover)!important; border-color:var(--aidc-border-strong)!important; color:var(--aidc-text-primary)!important; } /* Light mode needs an explicit final floor because all modules above inject their styles after DOMContentLoaded. */ html[data-page="canvas"][data-aidc-color-mode="light"] body :is( .canvas-tab-ctxmenu, .canvas-board-picker, .canvas-connector-bar, .cb-more-dropdown, .cb-insert-dropdown, .frames-panel ){ background:var(--aidc-bg-popover)!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; border-color:var(--aidc-border-default)!important; opacity:1!important; } @media (max-width:767px){ html[data-page="canvas"] body .canvas-connector-bar .cb-btn{ width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; } html[data-page="canvas"] body :is(.canvas-tab-ctxmenu button,.canvas-board-picker__item,.cb-more-item,.cb-insert-btn){ min-height:44px!important; } } /* Last owner for the shared color/stroke picker used by every object type. */ /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Canonical Canvas color/stroke picker contract. canvas-text-editor.js is the single shared owner for text, shapes, callouts, mind-map nodes and connectors. Some legacy light-theme rules still beat the runtime inline swatch backgrounds with !important; this final adapter restores the semantic picker surface and the actual palette colors deterministically. */ html[data-page="canvas"]{ --aidc-canvas-picker-swatch:24px; --aidc-canvas-picker-row:40px; } html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker){ background:var(--aidc-bg-popover)!important; border:1px solid var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; box-shadow:var(--aidc-shadow-popover)!important; opacity:1!important; } html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) :is(.te-cp-title,div[style*="color:#a0a8c0"],div[style*="color: #a0a8c0"],span[style*="color:#a0a8c0"],span[style*="color: #a0a8c0"]){ color:var(--aidc-text-secondary)!important; -webkit-text-fill-color:var(--aidc-text-secondary)!important; opacity:1!important; } html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-grid{ display:grid!important; grid-template-columns:repeat(10,var(--aidc-canvas-picker-swatch))!important; gap:5px!important; margin:0 0 10px!important; align-items:center!important; justify-content:start!important; min-height:var(--aidc-canvas-picker-swatch)!important; } html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch{ box-sizing:border-box!important; width:var(--aidc-canvas-picker-swatch)!important; height:var(--aidc-canvas-picker-swatch)!important; min-width:var(--aidc-canvas-picker-swatch)!important; min-height:var(--aidc-canvas-picker-swatch)!important; max-width:var(--aidc-canvas-picker-swatch)!important; max-height:var(--aidc-canvas-picker-swatch)!important; padding:0!important; margin:0!important; border:2px solid color-mix(in srgb,var(--aidc-border-strong) 76%,transparent)!important; border-radius:6px!important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--aidc-bg-page) 18%,transparent)!important; opacity:1!important; appearance:none!important; -webkit-appearance:none!important; } html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:hover{ border-color:var(--aidc-action-focus)!important; box-shadow:0 0 0 2px var(--aidc-action-focus-ring)!important; transform:scale(1.08)!important; } html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch.is-active{ border-color:var(--aidc-action-primary-from)!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--aidc-action-primary-from) 24%,transparent)!important; } html[data-page="canvas"] body .te-color-picker .te-cp-grid > .te-cp-swatch:first-child[style*="background: transparent"]{ background:linear-gradient(45deg,transparent 46%,var(--aidc-red-500) 47% 53%,transparent 54%),var(--aidc-bg-elevated)!important; color:var(--aidc-red-500)!important; -webkit-text-fill-color:var(--aidc-red-500)!important; border-style:dashed!important; } html[data-page="canvas"] body .te-color-picker .te-cp-custom{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; min-height:36px!important; padding:4px 0 8px!important; margin:0!important; } html[data-page="canvas"] body .te-color-picker .te-cp-custom::before{ content:"Свой цвет"; color:var(--aidc-text-secondary)!important; font-size:12px; line-height:1; } html[data-page="canvas"] body .te-color-picker .te-cp-custom input[type="color"], html[data-page="canvas"] body .te-stroke-picker input[type="color"]{ box-sizing:border-box!important; flex:0 0 42px!important; width:42px!important; height:32px!important; min-width:42px!important; max-width:42px!important; padding:2px!important; border:1px solid var(--aidc-border-strong)!important; border-radius:8px!important; background:var(--aidc-bg-elevated)!important; color-scheme:light dark; cursor:pointer!important; opacity:1!important; } html[data-page="canvas"] body .te-color-picker .te-cp-custom input[type="color"]::-webkit-color-swatch-wrapper, html[data-page="canvas"] body .te-stroke-picker input[type="color"]::-webkit-color-swatch-wrapper{padding:2px!important} html[data-page="canvas"] body .te-color-picker .te-cp-custom input[type="color"]::-webkit-color-swatch, html[data-page="canvas"] body .te-stroke-picker input[type="color"]::-webkit-color-swatch{ border:1px solid var(--aidc-border-default)!important; border-radius:5px!important; } html[data-page="canvas"] body .te-stroke-picker .te-submenu-item{ box-sizing:border-box!important; min-height:36px!important; background:var(--aidc-btn-secondary-bg)!important; border:1px solid var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; opacity:1!important; } html[data-page="canvas"] body .te-stroke-picker .te-submenu-item:hover{ background:var(--aidc-btn-secondary-bg-hover)!important; border-color:var(--aidc-border-strong)!important; } html[data-page="canvas"] body .te-stroke-picker .te-submenu-item:is(.is-active,[style*="rgba(111,124,255,0.22)"],[style*="rgba(111, 124, 255, 0.22)"]){ background:var(--aidc-workspace-selection-bg)!important; border-color:var(--aidc-workspace-selection-border)!important; color:var(--aidc-action-primary-to)!important; -webkit-text-fill-color:var(--aidc-action-primary-to)!important; } html[data-page="canvas"] body .te-stroke-picker .te-submenu-item svg, html[data-page="canvas"] body .te-stroke-picker .te-submenu-item svg :is(path,rect,circle,line,polyline,polygon,ellipse){ color:currentColor!important; stroke:currentColor!important; fill:none!important; opacity:1!important; } html[data-page="canvas"] body .te-stroke-picker input[type="range"]{ accent-color:var(--aidc-action-focus)!important; opacity:1!important; } html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) > .te-submenu-item{ min-height:var(--aidc-canvas-picker-row)!important; border-radius:8px!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; opacity:1!important; } html[data-page="canvas"][data-aidc-color-mode="light"] body :is(.te-color-picker,.te-stroke-picker){ background:var(--aidc-bg-popover)!important; border-color:var(--aidc-border-default)!important; color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; } html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF3366" i],[style*="rgb(255, 51, 102)"]){background-color:#FF3366!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF6633" i],[style*="rgb(255, 102, 51)"]){background-color:#FF6633!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF9933" i],[style*="rgb(255, 153, 51)"]){background-color:#FF9933!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FFCC33" i],[style*="rgb(255, 204, 51)"]){background-color:#FFCC33!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FFFF33" i],[style*="rgb(255, 255, 51)"]){background-color:#FFFF33!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#CCFF33" i],[style*="rgb(204, 255, 51)"]){background-color:#CCFF33!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#66FF33" i],[style*="rgb(102, 255, 51)"]){background-color:#66FF33!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#33FF66" i],[style*="rgb(51, 255, 102)"]){background-color:#33FF66!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#33FFCC" i],[style*="rgb(51, 255, 204)"]){background-color:#33FFCC!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#33CCFF" i],[style*="rgb(51, 204, 255)"]){background-color:#33CCFF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#3366FF" i],[style*="rgb(51, 102, 255)"]){background-color:#3366FF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#6633FF" i],[style*="rgb(102, 51, 255)"]){background-color:#6633FF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#CC33FF" i],[style*="rgb(204, 51, 255)"]){background-color:#CC33FF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF33CC" i],[style*="rgb(255, 51, 204)"]){background-color:#FF33CC!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF3399" i],[style*="rgb(255, 51, 153)"]){background-color:#FF3399!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF6666" i],[style*="rgb(255, 102, 102)"]){background-color:#FF6666!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF9966" i],[style*="rgb(255, 153, 102)"]){background-color:#FF9966!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FFCC66" i],[style*="rgb(255, 204, 102)"]){background-color:#FFCC66!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FFFF66" i],[style*="rgb(255, 255, 102)"]){background-color:#FFFF66!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#CCFF66" i],[style*="rgb(204, 255, 102)"]){background-color:#CCFF66!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#66FF66" i],[style*="rgb(102, 255, 102)"]){background-color:#66FF66!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#33FF99" i],[style*="rgb(51, 255, 153)"]){background-color:#33FF99!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#33FFFF" i],[style*="rgb(51, 255, 255)"]){background-color:#33FFFF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#66CCFF" i],[style*="rgb(102, 204, 255)"]){background-color:#66CCFF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#6699FF" i],[style*="rgb(102, 153, 255)"]){background-color:#6699FF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#9966FF" i],[style*="rgb(153, 102, 255)"]){background-color:#9966FF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#CC66FF" i],[style*="rgb(204, 102, 255)"]){background-color:#CC66FF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF66CC" i],[style*="rgb(255, 102, 204)"]){background-color:#FF66CC!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FFFFFF" i],[style*="rgb(255, 255, 255)"]){background-color:#FFFFFF!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#CCCCCC" i],[style*="rgb(204, 204, 204)"]){background-color:#CCCCCC!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#999999" i],[style*="rgb(153, 153, 153)"]){background-color:#999999!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#666666" i],[style*="rgb(102, 102, 102)"]){background-color:#666666!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#333333" i],[style*="rgb(51, 51, 51)"]){background-color:#333333!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#1a1a2e" i],[style*="rgb(26, 26, 46)"]){background-color:#1a1a2e!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#0a0e1a" i],[style*="rgb(10, 14, 26)"]){background-color:#0a0e1a!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#0f1420" i],[style*="rgb(15, 20, 32)"]){background-color:#0f1420!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#1c1230" i],[style*="rgb(28, 18, 48)"]){background-color:#1c1230!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#2D1B69" i],[style*="rgb(45, 27, 105)"]){background-color:#2D1B69!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#001F3F" i],[style*="rgb(0, 31, 63)"]){background-color:#001F3F!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#2D4A22" i],[style*="rgb(45, 74, 34)"]){background-color:#2D4A22!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#3C1518" i],[style*="rgb(60, 21, 24)"]){background-color:#3C1518!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#0D2F2F" i],[style*="rgb(13, 47, 47)"]){background-color:#0D2F2F!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#8B4513" i],[style*="rgb(139, 69, 19)"]){background-color:#8B4513!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF6B35" i],[style*="rgb(255, 107, 53)"]){background-color:#FF6B35!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#0074D9" i],[style*="rgb(0, 116, 217)"]){background-color:#0074D9!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#3CB371" i],[style*="rgb(60, 179, 113)"]){background-color:#3CB371!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#8B0000" i],[style*="rgb(139, 0, 0)"]){background-color:#8B0000!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#4B0082" i],[style*="rgb(75, 0, 130)"]){background-color:#4B0082!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FFB6C1" i],[style*="rgb(255, 182, 193)"]){background-color:#FFB6C1!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#E8F4FD" i],[style*="rgb(232, 244, 253)"]){background-color:#E8F4FD!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#FF9A8B" i],[style*="rgb(255, 154, 139)"]){background-color:#FF9A8B!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} html[data-page="canvas"] body :is(.te-color-picker,.te-stroke-picker) .te-cp-swatch:is([style*="#B7E4C7" i],[style*="rgb(183, 228, 199)"]){background-color:#B7E4C7!important /* theme-color-allow: artwork palette swatch must display its exact selectable color */} /* Canvas visual chrome adapter. Scope: dashboard panels/cards, neutral controls, mobile toolbar/topbar and menus. Excluded intentionally: node colors, drawing colors, mindmap palette, export/render content colors and dynamic board content. */ html[data-page="canvas"], html[data-page="canvas"] body { background: var(--aidc-bg-page); color: var(--aidc-text-primary); } html[data-page="canvas"] .canvas-dashboard .panel, html[data-page="canvas"] .panel-templates { background: var(--aidc-bg-panel); border-color: var(--aidc-border-subtle); box-shadow: var(--aidc-shadow-popover); } html[data-page="canvas"] .panel-title, html[data-page="canvas"] .template-card__label, html[data-page="canvas"] .board-card__title, html[data-page="canvas"] .col-name .list-title { color: var(--aidc-text-primary); } html[data-page="canvas"] .boards-filters label, html[data-page="canvas"] .boards-sort label, html[data-page="canvas"] .board-card__meta, html[data-page="canvas"] .boards-list-header, html[data-page="canvas"] .col-users, html[data-page="canvas"] .col-opened, html[data-page="canvas"] .col-owner { color: var(--aidc-text-muted); } html[data-page="canvas"] .template-card, html[data-page="canvas"] .board-card { background: var(--aidc-bg-card); border-color: var(--aidc-border-subtle); } html[data-page="canvas"] .template-card:hover, html[data-page="canvas"] .board-card:hover { border-color: var(--aidc-border-strong); box-shadow: var(--aidc-shadow-popover); } html[data-page="canvas"] .template-card__thumb, html[data-page="canvas"] .board-card__thumb { background: var(--aidc-bg-elevated); } html[data-page="canvas"] .template-card--blank .template-card__thumb { background: color-mix(in srgb, var(--aidc-action-primary-from) 8%, var(--aidc-bg-elevated) 92%); color: var(--aidc-action-primary-from); } html[data-page="canvas"] .btn-primary { background: linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to)); color: var(--aidc-text-inverse); box-shadow: 0 0 18px var(--aidc-action-primary-glow); } html[data-page="canvas"] .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 0 24px var(--aidc-action-primary-glow); } html[data-page="canvas"] .btn-outline, html[data-page="canvas"] .view-btn, html[data-page="canvas"] .list-fav-btn, html[data-page="canvas"] .list-menu-btn { background: var(--aidc-btn-secondary-bg); border-color: var(--aidc-border-default); color: var(--aidc-text-secondary); } html[data-page="canvas"] .btn-outline:hover, html[data-page="canvas"] .view-btn:hover, html[data-page="canvas"] .list-fav-btn:hover, html[data-page="canvas"] .list-menu-btn:hover { background: var(--aidc-btn-secondary-bg-hover); border-color: var(--aidc-border-strong); color: var(--aidc-text-primary); } html[data-page="canvas"] .view-btn.active { background: color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent); border-color: color-mix(in srgb,var(--aidc-action-primary-from) 42%,transparent); color: var(--aidc-text-inverse); } html[data-page="canvas"] .custom-select__trigger, html[data-page="canvas"] .boards-search-box input, html[data-page="canvas"] .board-card__title-input { background: var(--aidc-bg-elevated); border-color: var(--aidc-border-default); color: var(--aidc-text-primary); } html[data-page="canvas"] .custom-select__trigger:hover, html[data-page="canvas"] .custom-select.open .custom-select__trigger, html[data-page="canvas"] .boards-search-box input:focus, html[data-page="canvas"] .board-card__title-input:focus { border-color: var(--aidc-action-focus); box-shadow: 0 0 0 3px var(--aidc-action-focus-ring); outline: none; } html[data-page="canvas"] .custom-select__dropdown, html[data-page="canvas"] .shapes-menu, html[data-page="canvas"] .arrow-type-popup, html[data-page="canvas"] .emoji-popup, html[data-page="canvas"] .export-menu, html[data-page="canvas"] .anchor-menu, html[data-page="canvas"] .canvas-ctx-menu, html[data-page="canvas"] .canvas-tooltip { background: var(--aidc-bg-popover); border-color: var(--aidc-border-default); color: var(--aidc-text-primary); box-shadow: var(--aidc-shadow-popover); } /* Light Canvas finalization: board content itself keeps its own user/system colors; only application chrome, dashboard metadata and actions are changed. */ html[data-page="canvas"][data-aidc-color-mode="light"] :where( .boards-filters label,.boards-sort label,.board-card__meta,.boards-list-header, .col-users,.col-opened,.col-owner ){ color:var(--aidc-text-secondary)!important; opacity:1!important } html[data-page="canvas"][data-aidc-color-mode="light"] :where( .btn-primary,.button.primary,.pill-btn.primary ):not(.danger):not(.btn-danger){ background:var(--aidc-btn-primary-bg)!important; border:1px solid var(--aidc-btn-primary-border)!important; color:var(--aidc-btn-primary-text)!important; box-shadow:none!important; filter:none!important } html[data-page="canvas"][data-aidc-color-mode="light"] :where( .btn-primary,.button.primary,.pill-btn.primary ):not(.danger):not(.btn-danger):hover:not(:disabled), html[data-page="canvas"][data-aidc-color-mode="light"] :where( .btn-primary,.button.primary,.pill-btn.primary ):not(.danger):not(.btn-danger):focus-visible{ background:var(--aidc-btn-primary-bg-hover)!important; border-color:var(--aidc-btn-primary-border-hover)!important; color:var(--aidc-btn-primary-text)!important; box-shadow:none!important; filter:none!important; outline:none!important } html[data-page="canvas"][data-aidc-color-mode="light"] .view-btn.active{ background:var(--aidc-workspace-selection-bg)!important; border-color:var(--aidc-workspace-selection-border)!important; color:var(--aidc-action-primary-to)!important; box-shadow:none!important } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Canvas comments and popup chrome. Comment pin colors, emoji content and sticker artwork remain content-owned. */ html[data-page="canvas"] .comment-dialog{ background:var(--aidc-bg-popover); border-color:var(--aidc-border-default); color:var(--aidc-text-primary); box-shadow:var(--aidc-shadow-popover) } html[data-page="canvas"] .comment-dialog__header, html[data-page="canvas"] .comment-dialog__input, html[data-page="canvas"] .ep-tabs, html[data-page="canvas"] .arrow-type-popup__sep{ border-color:var(--aidc-border-subtle) } html[data-page="canvas"] .comment-dialog__resolve, html[data-page="canvas"] .cd-bell-btn, html[data-page="canvas"] .cd-more-btn, html[data-page="canvas"] .shapes-menu__btn, html[data-page="canvas"] .emoji-popup__btn, html[data-page="canvas"] .ep-sticker-btn{ background:var(--aidc-btn-secondary-bg); border-color:var(--aidc-border-default); color:var(--aidc-text-secondary) } html[data-page="canvas"] .comment-dialog__resolve:hover, html[data-page="canvas"] .cd-bell-btn:hover, html[data-page="canvas"] .cd-more-btn:hover, html[data-page="canvas"] .shapes-menu__btn:hover, html[data-page="canvas"] .emoji-popup__btn:hover, html[data-page="canvas"] .ep-sticker-btn:hover{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-strong); color:var(--aidc-text-primary) } html[data-page="canvas"] .comment-dialog__messages{ scrollbar-color:var(--aidc-border-default) transparent } html[data-page="canvas"] .comment-dialog__messages::-webkit-scrollbar-thumb{ background:var(--aidc-border-default) } html[data-page="canvas"] .comment-dialog__messages::-webkit-scrollbar-thumb:hover{ background:var(--aidc-border-strong) } html[data-page="canvas"] .comment-msg__author, html[data-page="canvas"] .cd-resolve-label, html[data-page="canvas"] .arrow-type-popup__title, html[data-page="canvas"] .ep-sticker-section__title{ color:var(--aidc-text-muted) } html[data-page="canvas"] .comment-msg__text, html[data-page="canvas"] .arrow-type-popup__btn{ color:var(--aidc-text-secondary) } html[data-page="canvas"] .comment-msg__time{ color:var(--aidc-text-muted) } html[data-page="canvas"] .comment-dialog__input input, html[data-page="canvas"] .ep-search{ background:var(--aidc-bg-elevated); border-color:var(--aidc-border-default); color:var(--aidc-text-primary) } html[data-page="canvas"] .comment-dialog__input input:focus, html[data-page="canvas"] .ep-search:focus{ border-color:var(--aidc-action-focus); box-shadow:0 0 0 3px var(--aidc-action-focus-ring); outline:none } html[data-page="canvas"] .comment-dialog__input button{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent); color:var(--aidc-action-primary-from) } html[data-page="canvas"] .comment-dialog__input button:hover{ background:color-mix(in srgb,var(--aidc-action-primary-from) 18%,transparent) } html[data-page="canvas"] .cd-resolve-slider{ background:var(--aidc-btn-secondary-bg-hover) } html[data-page="canvas"] .cd-resolve-slider::after{ background:var(--aidc-text-muted) } html[data-page="canvas"] .cd-resolve-cb:checked + .cd-resolve-slider{ background:color-mix(in srgb,var(--aidc-green-500) 34%,transparent) } html[data-page="canvas"] .cd-resolve-cb:checked + .cd-resolve-slider::after{ background:var(--aidc-green-500) } html[data-page="canvas"] .cd-bell-btn.is-active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent); color:var(--aidc-text-primary) } html[data-page="canvas"] .arrow-type-popup__btn:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } html[data-page="canvas"] .arrow-type-popup__btn.is-selected{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent); color:var(--aidc-action-primary-from) } html[data-page="canvas"] .ep-tab{ color:var(--aidc-text-muted) } html[data-page="canvas"] .ep-tab:hover{ color:var(--aidc-text-primary) } html[data-page="canvas"] .ep-tab.is-active{ color:var(--aidc-action-primary-from); border-bottom-color:var(--aidc-action-primary-from) } html[data-page="canvas"] .ep-search::placeholder{ color:var(--aidc-text-muted) } /* AI Design Space — canonical design tokens v1. This file is the single source of truth for global theme values. Components must consume semantic/component tokens, not hardcoded theme colors. */ html:root { color-scheme: dark; --aidc-font-family-ui: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --aidc-font-size-body: 14px; --aidc-font-size-control: 13px; --aidc-font-size-caption: 12px; --aidc-heading-scale: 1.2; /* Dark palette calibrated against the published Theme Settings surfaces. */ --aidc-neutral-950: #25262c; --aidc-neutral-925: #282a33; --aidc-neutral-900: #30313a; --aidc-neutral-850: #2b2d35; --aidc-neutral-800: #2d2f37; --aidc-neutral-775: #41434f; /* Brand primitives */ --aidc-pink-500: #ff62c5; --aidc-pink-600: #ec008c; --aidc-violet-500: #7568ff; --aidc-cyan-500: #39bfff; --aidc-provider-yandex-bg: #fc3f1d; /* Status primitives */ --aidc-red-500: #ef5261; --aidc-red-600: #d94454; --aidc-amber-500: #d4a440; --aidc-green-500: #43c88d; /* Semantic surfaces */ --aidc-bg-page: var(--aidc-neutral-950); --aidc-bg-panel: var(--aidc-neutral-900); --aidc-bg-elevated: var(--aidc-neutral-850); --aidc-bg-card: var(--aidc-neutral-800); --aidc-bg-modal: #353741; --aidc-bg-popover: var(--aidc-neutral-925); --aidc-bg-folder-surface: var(--aidc-neutral-775); --aidc-bg-account-page: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-bg-generator-shell: var(--aidc-bg-panel); --aidc-bg-generator-card: color-mix(in srgb, var(--aidc-bg-panel) 82%, var(--aidc-bg-elevated) 18%); /* Dense workspaces: editors, pickers and full-screen tool stages. */ --aidc-workspace-bg: color-mix(in srgb, var(--aidc-bg-page) 72%, var(--aidc-bg-panel) 28%); --aidc-workspace-stage-bg: #20232b; --aidc-workspace-panel-bg: var(--aidc-bg-panel); --aidc-workspace-toolbar-bg: var(--aidc-neutral-925); --aidc-workspace-control-bg: var(--aidc-bg-elevated); --aidc-workspace-control-hover: color-mix(in srgb, var(--aidc-bg-elevated) 80%, var(--aidc-text-primary) 20%); --aidc-workspace-selection-bg: color-mix(in srgb, var(--aidc-action-primary-from) 12%, transparent); --aidc-workspace-selection-border: color-mix(in srgb, var(--aidc-action-primary-from) 46%, transparent); /* Semantic text */ --aidc-text-primary: #f5f5f7; --aidc-text-secondary: #cfd0d7; --aidc-text-muted: #9799a6; --aidc-text-disabled: #6f727e; --aidc-text-inverse: #ffffff; --aidc-text-on-media: #ffffff; --icon-color: var(--aidc-text-secondary); /* Readability on photography/video is deliberately theme-independent. */ --aidc-media-caption-gradient: linear-gradient(180deg,transparent 0%,rgba(6,8,14,.18) 30%,rgba(6,8,14,.82) 100%); --aidc-media-overlay-bg: rgba(7, 9, 14, 0.68); --aidc-media-overlay-bg-soft: rgba(7, 9, 14, 0.46); --aidc-media-overlay-border: rgba(255, 255, 255, 0.22); --aidc-media-text-shadow: none; /* Semantic borders */ --aidc-border-default: rgba(255, 255, 255, 0.11); --aidc-border-subtle: rgba(255, 255, 255, 0.065); --aidc-border-strong: rgba(255, 255, 255, 0.18); /* Component tokens — dense admin workspaces */ --aidc-admin-workspace-surface-border: var(--aidc-border-subtle); --aidc-admin-workspace-control-border: var(--aidc-border-default); /* Brand actions */ --aidc-action-primary-from: var(--aidc-pink-500); --aidc-action-primary-to: var(--aidc-pink-600); --aidc-action-primary-glow: rgba(255, 0, 140, 0.24); --aidc-action-focus: rgba(57, 191, 255, 0.68); --aidc-action-focus-ring: rgba(57, 191, 255, 0.16); /* Shared expressive brand gradients. */ --aidc-gradient-brand-from: var(--aidc-pink-500); --aidc-gradient-brand-to: var(--aidc-cyan-500); --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 24%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 40%), var(--aidc-bg-page); --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 44%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 30%, transparent), transparent 58%), var(--aidc-bg-panel); --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, var(--aidc-gradient-brand-from) 30%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--aidc-gradient-brand-to) 20%, transparent), transparent 60%), var(--aidc-bg-card); --aidc-gradient-brand-icon: linear-gradient(135deg, color-mix(in srgb, var(--aidc-gradient-brand-to) 82%, white 18%), var(--aidc-gradient-brand-from)); /* Status actions */ --aidc-action-danger-from: var(--aidc-red-500); --aidc-action-danger-to: var(--aidc-red-600); --aidc-action-danger-border: rgba(239, 82, 97, 0.42); --aidc-action-danger-glow: rgba(239, 82, 97, 0.24); --aidc-status-warning: var(--aidc-amber-500); --aidc-status-success: var(--aidc-green-500); --aidc-status-warning-bg: color-mix(in srgb, var(--aidc-status-warning) 13%, transparent); --aidc-status-warning-border: color-mix(in srgb, var(--aidc-status-warning) 34%, transparent); --aidc-status-warning-text: var(--aidc-status-warning); --aidc-status-success-bg: color-mix(in srgb, var(--aidc-status-success) 12%, transparent); --aidc-status-success-border: color-mix(in srgb, var(--aidc-status-success) 32%, transparent); --aidc-status-danger-bg: color-mix(in srgb, var(--aidc-red-500) 12%, transparent); /* CRM columns */ --aidc-crm-column-default: #505159; --aidc-crm-column-overdue: #41434a; --aidc-crm-column-cancelled: #3a3b43; /* Effects */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(3, 4, 8, 0.58); --aidc-shadow-card: none; --aidc-shadow-dialog: none; --aidc-shadow-modal: none; --aidc-shadow-popover: none; --aidc-radius-control: 10px; --aidc-radius-button: 12px; --aidc-radius-dialog: 16px; --aidc-radius-pill: 999px; /* Shared interaction geometry — pages choose a size, never invent a height. */ --aidc-control-height-sm: 34px; --aidc-control-height-md: 40px; --aidc-control-height-lg: 46px; --aidc-icon-control-size-sm: 34px; --aidc-icon-control-size-md: 40px; --aidc-icon-control-size-lg: 46px; --aidc-menu-row-height: 40px; --aidc-control-padding-x: 12px; --aidc-control-gap: 8px; --aidc-control-selected-bg: var(--aidc-workspace-selection-bg); --aidc-control-selected-border: var(--aidc-workspace-selection-border); --aidc-control-selected-text: var(--aidc-text-primary); --aidc-control-disabled-bg: color-mix(in srgb, var(--aidc-bg-elevated) 72%, transparent); --aidc-control-disabled-border: var(--aidc-border-subtle); /* Shared full-height workspace geometry. Route adapters only set the chrome reserve when their header/tab stack differs; child panels consume these. */ --aidc-workspace-chrome-reserve: 172px; --aidc-workspace-footer-reserve: 38px; --aidc-workspace-content-min-height: 520px; --aidc-workspace-gap: 16px; --aidc-workspace-panel-padding: 18px; --aidc-workspace-toolbar-rail-width: 54px; --aidc-workspace-available-height: calc((100dvh / var(--zoom, 1)) - var(--aidc-workspace-chrome-reserve) - var(--aidc-workspace-footer-reserve)); /* Component surfaces and media labels; adapters consume these contracts. */ --aidc-admin-card-hover-bg: var(--aidc-bg-modal); --aidc-lightbox-stage-bg: var(--aidc-workspace-stage-bg); --aidc-resource-card-bg: var(--aidc-bg-card); --aidc-project-thumbnail-bg: var(--aidc-workspace-stage-bg); --aidc-media-label-bg: rgba(37,38,44,.84); --aidc-media-label-border: rgba(255,255,255,.26); --aidc-media-label-text: #f7f8fa; --aidc-media-label-text-shadow: none; /* Picker cursors and transparency checkerboards stay legible on any hue. */ --aidc-picker-cursor-color: #fff; --aidc-picker-cursor-outline: #000; --aidc-picker-sv-cursor-shadow: none; --aidc-picker-track-cursor-shadow: none; --aidc-picker-alpha-checker: rgba(127,127,127,.35); --aidc-picker-preview-checker: rgba(127,127,127,.32); /* Dense editor stage/toolbar/panel surfaces, shared by all editors. */ --aidc-editor-stage-surface: var(--aidc-workspace-stage-bg); --aidc-editor-stage-grid: var(--aidc-border-subtle); --aidc-editor-toolbar-surface: var(--aidc-workspace-toolbar-bg); --aidc-editor-panel-surface: var(--aidc-workspace-panel-bg); --aidc-editor-elevated-surface: var(--aidc-bg-elevated); /* Scrollbars — neutral utility, never a brand accent. */ --aidc-scrollbar-size: 6px; --aidc-scrollbar-thumb: rgba(207, 208, 215, 0.38); --aidc-scrollbar-thumb-hover: rgba(207, 208, 215, 0.58); --aidc-scrollbar-track: transparent; /* Component tokens — dialogs */ --aidc-dialog-bg: var(--aidc-bg-modal); --aidc-dialog-bg-from: var(--aidc-bg-modal); --aidc-dialog-bg-to: var(--aidc-neutral-925); --aidc-dialog-border: var(--aidc-border-default); --aidc-dialog-text: var(--aidc-text-primary); --aidc-dialog-message: var(--aidc-text-secondary); --aidc-dialog-input-bg: rgba(255, 255, 255, 0.045); --aidc-dialog-input-border: var(--aidc-border-strong); /* Component tokens — buttons */ --aidc-btn-secondary-bg: rgba(255, 255, 255, 0.055); --aidc-btn-secondary-bg-hover: rgba(255, 255, 255, 0.095); --aidc-btn-secondary-border: var(--aidc-border-strong); --aidc-btn-primary-bg: linear-gradient(135deg, var(--aidc-action-primary-from), var(--aidc-action-primary-to)); --aidc-btn-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--aidc-action-primary-from) 88%, white 12%), var(--aidc-action-primary-to)); --aidc-btn-primary-border: var(--aidc-border-strong); --aidc-btn-primary-border-hover: color-mix(in srgb, var(--aidc-action-primary-from) 56%, transparent); --aidc-btn-primary-text: var(--aidc-text-inverse); --aidc-btn-primary-shadow: none; --aidc-btn-disabled-bg: var(--aidc-control-disabled-bg); --aidc-btn-disabled-border: var(--aidc-control-disabled-border); --aidc-btn-disabled-text: var(--aidc-text-disabled); /* Component tokens — Canvas board chrome. */ --aidc-canvas-board-bg: #1c1e29; --aidc-canvas-grid-color: rgba(255, 255, 255, 0.07); --aidc-canvas-chrome-bg: rgba(28, 30, 39, 0.88); --aidc-canvas-chrome-border: rgba(255, 255, 255, 0.12); --aidc-canvas-control-bg: rgba(255, 255, 255, 0.045); --aidc-canvas-control-hover: rgba(255, 255, 255, 0.09); --aidc-canvas-control-text: #e4e8f8; --aidc-canvas-control-active-bg: color-mix(in srgb, var(--aidc-violet-500) 16%, transparent); --aidc-canvas-control-active-border: color-mix(in srgb, var(--aidc-violet-500) 58%, transparent); --aidc-canvas-control-active-text: color-mix(in srgb, var(--aidc-cyan-500) 72%, white 28%); } /* Light mode is a semantic palette, not a visual inversion. */ html:root[data-aidc-color-mode="light"] { color-scheme: light; /* Deliberately grey application hierarchy: no near-white page-sized slabs. */ --aidc-neutral-950: #e4e8ed !important; --aidc-neutral-925: #e9edf1 !important; --aidc-neutral-900: #eef1f4 !important; --aidc-neutral-850: #dce2e8 !important; --aidc-neutral-800: #f2f4f6 !important; --aidc-neutral-775: #d2d9e0 !important; /* Light component surfaces retain the existing contrast hierarchy. */ --aidc-admin-card-hover-bg: #fbfbfc; --aidc-lightbox-stage-bg: #dde2e8; --aidc-resource-card-bg: #d5d9de; --aidc-project-thumbnail-bg: #d6dae0; --aidc-editor-stage-surface: #d5dbe2; --aidc-editor-stage-grid: rgba(20,25,34,.12); --aidc-editor-toolbar-surface: #e4e9ee; --aidc-editor-panel-surface: #e9edf1; --aidc-editor-elevated-surface: #dce2e8; /* Brand/status primitives adjusted for light surfaces. */ --aidc-pink-500: #d2298d !important; --aidc-pink-600: #b9006f !important; --aidc-violet-500: #5c52d9 !important; --aidc-cyan-500: #087ea4 !important; --aidc-red-500: #b92f40 !important; --aidc-red-600: #992433 !important; --aidc-amber-500: #795700 !important; --aidc-green-500: #116b47 !important; /* Semantic surfaces */ --aidc-bg-page: #e4e8ed !important; --aidc-bg-panel: #eef1f4 !important; --aidc-bg-elevated: #dce2e8 !important; --aidc-bg-card: #f2f4f6 !important; --aidc-bg-modal: #f2f4f6 !important; --aidc-bg-popover: #e9edf1 !important; --aidc-bg-folder-surface: #d2d9e0 !important; --aidc-bg-account-page: color-mix(in srgb, #e4e8ed 82%, #dce2e8 18%) !important; --aidc-bg-generator-shell: #eef1f4 !important; --aidc-bg-generator-card: color-mix(in srgb, #eef1f4 78%, #dce2e8 22%) !important; --aidc-workspace-bg: #d6dde4 !important; --aidc-workspace-stage-bg: #cdd5dd !important; --aidc-workspace-panel-bg: #eef1f4 !important; --aidc-workspace-toolbar-bg: #e6ebef !important; --aidc-workspace-control-bg: #dce2e8 !important; --aidc-workspace-control-hover: #d0d8e0 !important; --aidc-workspace-selection-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-workspace-selection-border: color-mix(in srgb, #d2298d 44%, transparent) !important; /* Semantic text — stronger contrast for dense workspace UI. */ --aidc-text-primary: #141922 !important; --aidc-text-secondary: #353c49 !important; --aidc-text-muted: #58616f !important; --aidc-text-disabled: #737d8b !important; --aidc-text-on-media: #ffffff !important; --icon-color: #46505f !important; /* Borders */ --aidc-border-default: rgba(20, 25, 34, 0.16) !important; --aidc-border-subtle: rgba(20, 25, 34, 0.10) !important; --aidc-border-strong: rgba(20, 25, 34, 0.26) !important; --aidc-admin-workspace-surface-border: rgba(20, 25, 34, 0.13) !important; --aidc-admin-workspace-control-border: rgba(20, 25, 34, 0.20) !important; /* Brand actions */ --aidc-action-primary-from: #d2298d !important; --aidc-action-primary-to: #b9006f !important; --aidc-action-primary-glow: rgba(185, 0, 111, 0.12) !important; --aidc-action-focus: rgba(8, 126, 164, 0.82) !important; --aidc-action-focus-ring: rgba(8, 126, 164, 0.18) !important; --aidc-gradient-brand-from: #d2298d !important; --aidc-gradient-brand-to: #087ea4 !important; --aidc-gradient-brand-page: radial-gradient(circle at 12% 0, color-mix(in srgb, #d2298d 8%, transparent), transparent 38%), radial-gradient(circle at 100% 12%, color-mix(in srgb, #087ea4 6%, transparent), transparent 40%), #e4e8ed !important; --aidc-gradient-brand-surface: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 9%, transparent), transparent 54%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 7%, transparent), transparent 58%), #eef1f4 !important; --aidc-gradient-brand-card: radial-gradient(circle at 0 0, color-mix(in srgb, #d2298d 7%, transparent), transparent 56%), radial-gradient(circle at 100% 100%, color-mix(in srgb, #087ea4 5%, transparent), transparent 60%), #f2f4f6 !important; /* Status actions */ --aidc-action-danger-from: #b92f40 !important; --aidc-action-danger-to: #992433 !important; --aidc-action-danger-border: rgba(185, 47, 64, 0.40) !important; --aidc-action-danger-glow: rgba(185, 47, 64, 0.13) !important; --aidc-status-warning: #795700 !important; --aidc-status-success: #116b47 !important; --aidc-status-warning-bg: color-mix(in srgb, #795700 10%, #f2f4f6 90%) !important; --aidc-status-warning-border: color-mix(in srgb, #795700 30%, transparent) !important; --aidc-status-warning-text: #6d4f00 !important; --aidc-status-success-bg: color-mix(in srgb, #116b47 9%, #f2f4f6 91%) !important; --aidc-status-success-border: color-mix(in srgb, #116b47 28%, transparent) !important; --aidc-status-danger-bg: color-mix(in srgb, #b92f40 9%, #f2f4f6 91%) !important; /* CRM columns */ --aidc-crm-column-default: #dce1e7 !important; --aidc-crm-column-overdue: #eedde1 !important; --aidc-crm-column-cancelled: #eadfe7 !important; /* Effects and shared controls */ /* Compact editor drawer backdrop. */ --aidc-editor-drawer-backdrop: rgba(8, 10, 18, 0.34); --aidc-backdrop: rgba(20, 25, 34, 0.40) !important; --aidc-scrollbar-thumb: rgba(53, 60, 73, 0.42) !important; --aidc-scrollbar-thumb-hover: rgba(53, 60, 73, 0.62) !important; --aidc-dialog-bg: #f2f4f6 !important; --aidc-dialog-bg-from: #f2f4f6 !important; --aidc-dialog-bg-to: #e4e8ed !important; --aidc-dialog-border: rgba(20, 25, 34, 0.16) !important; --aidc-dialog-text: #141922 !important; --aidc-dialog-message: #353c49 !important; --aidc-dialog-input-bg: rgba(20, 25, 34, 0.055) !important; --aidc-dialog-input-border: rgba(20, 25, 34, 0.24) !important; --aidc-btn-secondary-bg: rgba(20, 25, 34, 0.06) !important; --aidc-btn-secondary-bg-hover: rgba(20, 25, 34, 0.10) !important; --aidc-btn-secondary-border: rgba(20, 25, 34, 0.24) !important; /* Light primary actions: pale pink fill with a restrained pink outline. Keep bright fuchsia out of large CTA surfaces while preserving the brand hue. */ --aidc-btn-primary-bg: color-mix(in srgb, #d2298d 7%, #f7f4f6 93%) !important; --aidc-btn-primary-bg-hover: color-mix(in srgb, #d2298d 12%, #f7f4f6 88%) !important; --aidc-btn-primary-border: color-mix(in srgb, #d2298d 52%, #f7f4f6 48%) !important; --aidc-btn-primary-border-hover: color-mix(in srgb, #d2298d 68%, #f7f4f6 32%) !important; --aidc-btn-primary-text: #a84d7f !important; --aidc-btn-primary-shadow: none !important; --aidc-control-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-control-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-bg: rgba(20, 25, 34, 0.035) !important; --aidc-btn-disabled-border: rgba(20, 25, 34, 0.10) !important; --aidc-btn-disabled-text: #737d8b !important; /* Canvas board — neutral medium-grey workspace with readable dark grid. */ --aidc-canvas-board-bg: #aeb4bb !important; --aidc-canvas-grid-color: rgba(55, 62, 72, 0.20) !important; --aidc-canvas-chrome-bg: rgba(242, 244, 246, 0.95) !important; --aidc-canvas-chrome-border: rgba(20, 25, 34, 0.18) !important; --aidc-canvas-control-bg: rgba(20, 25, 34, 0.06) !important; --aidc-canvas-control-hover: rgba(20, 25, 34, 0.11) !important; --aidc-canvas-control-text: #353c49 !important; --aidc-canvas-control-active-bg: color-mix(in srgb, #d2298d 10%, #f2f4f6 90%) !important; --aidc-canvas-control-active-border: color-mix(in srgb, #d2298d 42%, transparent) !important; --aidc-canvas-control-active-text: #a21469 !important; } /* Platform-wide flat elevation contract. Both light and dark application themes are intentionally shadow-free. Visual hierarchy comes from surfaces, borders and spacing, not elevation. Focus stays accessible through a real outline instead of a shadow ring. */ html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body, html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body * { box-shadow: none !important; text-shadow: none !important; } html[data-aidc-color-mode][data-aidc-color-mode][data-aidc-color-mode] body :where( button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 2px solid var(--aidc-action-focus-ring) !important; outline-offset: 2px !important; } /* Global scrollbar contract. */ html, body, body * { scrollbar-width: thin !important; scrollbar-color: var(--aidc-scrollbar-thumb) var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar, body::-webkit-scrollbar, body *::-webkit-scrollbar { width: var(--aidc-scrollbar-size) !important; height: var(--aidc-scrollbar-size) !important; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, body *::-webkit-scrollbar-track { background: var(--aidc-scrollbar-track) !important; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, body *::-webkit-scrollbar-thumb { background: var(--aidc-scrollbar-thumb) !important; border: 1px solid transparent !important; background-clip: padding-box !important; border-radius: 999px !important; } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:hover { background: var(--aidc-scrollbar-thumb-hover) !important; background-clip: padding-box !important; } /* Theme tokens change as one paint; normal interaction transitions resume afterward. */ html[data-aidc-color-mode-changing], html[data-aidc-color-mode-changing] *, html[data-aidc-color-mode-changing] *::before, html[data-aidc-color-mode-changing] *::after { transition: none !important; } /* Canvas multi-selection and grid settings chrome. Grid swatch colors and custom color picker stay functional/user-owned. */ html[data-page="canvas"] .multi-sel-more-menu, html[data-page="canvas"] .grid-settings-popup{ background:var(--aidc-bg-popover); border-color:var(--aidc-border-default); color:var(--aidc-text-primary); box-shadow:var(--aidc-shadow-popover) } html[data-page="canvas"] .multi-sel-bar__menu-item, html[data-page="canvas"] .multi-sel-more-menu__item, html[data-page="canvas"] .gs-radio-row{ color:var(--aidc-text-secondary) } html[data-page="canvas"] .multi-sel-bar__menu-item:hover, html[data-page="canvas"] .multi-sel-more-menu__item:hover, html[data-page="canvas"] .gs-radio-row:hover{ background:var(--aidc-btn-secondary-bg-hover); color:var(--aidc-text-primary) } html[data-page="canvas"] .multi-sel-bar__menu-item.active, html[data-page="canvas"] .multi-sel-bar__btn.is-active, html[data-page="canvas"] .gs-radio-row.is-active{ background:color-mix(in srgb,var(--aidc-action-primary-from) 12%,transparent); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 40%,transparent); color:var(--aidc-action-primary-from) } html[data-page="canvas"] .multi-sel-bar__menu-count, html[data-page="canvas"] .gs-section-title, html[data-page="canvas"] .gs-radio-icon, html[data-page="canvas"] .gs-toggle-icon{ color:var(--aidc-text-muted) } html[data-page="canvas"] .multi-sel-more-menu__item--danger{ color:var(--aidc-red-500) } html[data-page="canvas"] .multi-sel-more-menu__item--danger:hover{ background:color-mix(in srgb,var(--aidc-red-500) 12%,transparent) } html[data-page="canvas"] .multi-sel-more-menu__sep, html[data-page="canvas"] .gs-sep{ background:var(--aidc-border-subtle) } html[data-page="canvas"] .gs-radio-label, html[data-page="canvas"] .gs-toggle-label{ color:var(--aidc-text-secondary) } html[data-page="canvas"] .gs-radio-dot{ border-color:var(--aidc-border-strong) } html[data-page="canvas"] .gs-radio-row.is-active .gs-radio-dot{ border-color:var(--aidc-action-primary-from) } html[data-page="canvas"] .gs-radio-row.is-active .gs-radio-dot::after{ background:var(--aidc-action-primary-from) } html[data-page="canvas"] .gs-toggle{ background:var(--aidc-btn-secondary-bg-hover); border-color:var(--aidc-border-default) } html[data-page="canvas"] .gs-toggle::after{ background:var(--aidc-text-secondary) } html[data-page="canvas"] .gs-toggle.is-on{ background:color-mix(in srgb,var(--aidc-action-primary-from) 24%,transparent); border-color:color-mix(in srgb,var(--aidc-action-primary-from) 46%,transparent) } html[data-page="canvas"] .gs-toggle.is-on::after{ background:var(--aidc-action-primary-from) } html[data-page="canvas"] .gs-color-swatch:hover{ border-color:var(--aidc-border-strong) } html[data-page="canvas"] .gs-color-swatch.is-active, html[data-page="canvas"] .gs-color-custom.is-active{ border-color:var(--aidc-text-primary) } /* Selection status is application chrome, not board content. The old inline pale-blue copy disappeared against light Canvas chrome; semantic tokens own both modes and deliberately override those legacy inline declarations. */ html[data-page="canvas"] .selection-hud, html[data-page="canvas"] .selection-hud__info{ background:var(--aidc-canvas-chrome-bg)!important; border-color:var(--aidc-canvas-chrome-border)!important; color:var(--aidc-canvas-control-text)!important; box-shadow:none!important } html[data-page="canvas"] .selection-hud .label{ color:var(--aidc-text-muted)!important; -webkit-text-fill-color:var(--aidc-text-muted)!important; opacity:1!important } html[data-page="canvas"] #selection-label, html[data-page="canvas"] .selection-hud__info :where(strong,b,[data-selection-label]){ color:var(--aidc-text-primary)!important; -webkit-text-fill-color:var(--aidc-text-primary)!important; opacity:1!important } /* ========================================================= Canvas Dashboard — Miro-style board management page ========================================================= */ /* --- Layout --- */ .canvas-dashboard { width: 100%; box-sizing: border-box; max-width: 100%; margin: 0 auto; padding: 16px 24px 0; display: flex; flex-direction: column; gap: 20px; overflow: hidden; min-height: 0; flex: 1 1 auto; } /* --- Panels (shared) --- */ .panel { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 28px 28px 24px; } /* --- Boards panel: stretch to fill, internal scroll --- */ .panel-boards { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .boards-grid, .boards-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 24px; scrollbar-width: thin; } .boards-grid::-webkit-scrollbar, .boards-list::-webkit-scrollbar { width: 6px; } .boards-grid::-webkit-scrollbar-track, .boards-list::-webkit-scrollbar-track { border-radius: 10px; } .boards-grid::-webkit-scrollbar-thumb, .boards-list::-webkit-scrollbar-thumb { border-radius: 10px; border: 1px solid transparent; background-clip: content-box; } .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .panel-title { font-size: 18px; font-weight: 700; letter-spacing: 0.02em; } /* --- TEMPLATES SLIDER --- */ .panel-templates { padding: 20px 24px 12px; flex: 0 0 auto; /* Standalone section — no .panel class, no stretch */ border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; } .panel-templates .panel-header { margin-bottom: 12px; } .templates-slider { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-behavior: smooth; scrollbar-width: thin; } .templates-slider::-webkit-scrollbar { height: 5px; } .templates-slider::-webkit-scrollbar-track { background: transparent; } .templates-slider::-webkit-scrollbar-thumb { border-radius: 8px; } .template-card { flex: 0 0 auto; width: 140px; cursor: pointer; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.06); transition: border-color 0.22s, box-shadow 0.22s, transform 0.18s; position: relative; } .template-card:hover { transform: translateY(-2px); } .template-card--blank { border-style: dashed; } .template-card--blank:hover { } .template-card__thumb { width: 100%; aspect-ratio: 16 / 11; display: flex; align-items: center; justify-content: center; font-size: 32px; user-select: none; } .template-card__thumb svg { width: 32px; height: 32px; } /* Template thumbnail image (when thumbnail_url is provided) */ .template-card__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px 14px 0 0; display: block; } .template-card--blank .template-card__thumb { font-size: 36px; } .template-card--blank .template-card__thumb svg { width: 36px; height: 36px; } .template-card__label { padding: 8px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* User template cards */ .template-card--user { } .template-card--user:hover { } .template-card__badge { position: absolute; top: 6px; left: 6px; font-size: 10px; padding: 2px 6px; border-radius: 6px; pointer-events: none; } .template-card__menu { position: absolute; top: 4px; right: 4px; border: none; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.12s, background 0.12s; } .template-card--user:hover .template-card__menu { opacity: 1; } .template-card__menu:hover { } /* User templates section */ .panel-user-templates { padding: 0 32px; margin-bottom: 8px; } .panel-user-templates .panel-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; } /* --- BOARDS SECTION --- */ .boards-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .boards-actions { display: flex; gap: 10px; } /* Buttons */ .btn-primary { padding: 9px 22px; border: none; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; transition: box-shadow 0.22s, transform 0.16s; letter-spacing: 0.01em; } .btn-primary:hover { transform: translateY(-1px); } .btn-outline { padding: 9px 20px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color 0.22s, color 0.22s; } .btn-outline:hover { } /* --- FILTERS ROW --- */ .boards-filters-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .boards-filters, .boards-sort { display: flex; align-items: center; gap: 8px; } .boards-filters label, .boards-sort label { font-size: 13px; font-weight: 500; } .custom-select { position: relative; display: inline-block; min-width: 140px; } .custom-select__trigger { display: flex; align-items: center; gap: 8px; padding: 7px 12px; padding-right: 28px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 10px; font-size: 13px; font-weight: 500; cursor: pointer; outline: none; transition: border-color 0.2s; width: 100%; text-align: left; position: relative; } .custom-select__trigger:hover, .custom-select.open .custom-select__trigger { } .custom-select__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .custom-select__arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 10px; height: 6px; transition: transform 0.2s; pointer-events: none; } .custom-select.open .custom-select__arrow { transform: translateY(-50%) rotate(180deg); } .custom-select__dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 260px; overflow-y: auto; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; z-index: 1000; padding: 4px 0; backdrop-filter: blur(16px); scrollbar-width: thin; animation: ctx-fade-in 0.15s ease; } .custom-select.open .custom-select__dropdown { display: block; } .custom-select__dropdown::-webkit-scrollbar { width: 4px; } .custom-select__dropdown::-webkit-scrollbar-track { background: transparent; } .custom-select__dropdown::-webkit-scrollbar-thumb { border-radius: 4px; } .custom-select__option { padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 6px; margin: 0 4px; transition: background 0.12s, color 0.12s; white-space: nowrap; } .custom-select__option:hover { } .custom-select__option.active { } .custom-select__option.active:hover { } .boards-view-toggle { display: flex; gap: 4px; margin-left: auto; } .view-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; background: transparent; font-size: 17px; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; } .view-btn:hover { } .view-btn.active { } /* --- SEARCH --- */ .boards-search-box { position: relative; flex: 0 0 220px; } .boards-search-box input { width: 100%; padding: 7px 12px 7px 34px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 10px; font-size: 13px; outline: none; transition: border-color 0.2s; } .boards-search-box input:focus { } .boards-search-box .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; pointer-events: none; } /* --- GRID VIEW --- */ .boards-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .board-card { position: relative; padding-bottom: 100%; height: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; transition: border-color 0.22s, box-shadow 0.22s, transform 0.18s; } .board-card:hover { transform: translateY(-2px); } .board-card__thumb { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .board-card__thumb img { width: 100%; height: 100%; object-fit: cover; } .board-card__thumb-placeholder { display: flex; align-items: center; justify-content: center; } .board-card__thumb-placeholder svg { width: 40px; height: 40px; } /* Fav star on card */ .board-card__fav { position: absolute; top: 8px; left: 8px; width: 28px; height: 28px; border-radius: 50%; backdrop-filter: blur(6px); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: color 0.2s, background 0.2s; z-index: 2; opacity: 0; } .board-card:hover .board-card__fav, .board-card__fav.active { opacity: 1; } .board-card__fav.active, .board-card__fav.active:hover { } .board-card__fav svg { width: 14px; height: 14px; } /* Context menu trigger */ .board-card__menu-btn { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; backdrop-filter: blur(6px); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; z-index: 2; opacity: 0; transition: opacity 0.18s, background 0.18s; } .board-card:hover .board-card__menu-btn { opacity: 1; } .board-card__menu-btn svg { width: 16px; height: 16px; } .board-card__menu-btn:hover { } /* Badge */ .board-card__badge { position: absolute; bottom: 8px; left: 8px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.14); z-index: 2; } /* Info area — overlay on bottom of card */ .board-card__info { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 12px 10px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; } .board-card__title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board-card__meta { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Inline rename */ .board-card__title-input { border: 1px solid rgba(255,255,255,0.30); border-radius: 8px; font-size: 14px; font-weight: 600; padding: 4px 8px; outline: none; width: 100%; } /* --- LIST VIEW --- */ .boards-list { width: 100%; } .boards-list-header { display: grid; grid-template-columns: 1fr 100px 160px 140px 50px; gap: 8px; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .boards-list-row { display: grid; grid-template-columns: 1fr 100px 160px 140px 50px; gap: 8px; padding: 12px 16px; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.04); cursor: pointer; transition: background 0.18s; border-radius: 8px; } .boards-list-row:hover { } .col-name { display: flex; align-items: center; gap: 12px; min-width: 0; } .col-name .list-thumb { width: 48px; height: 32px; border-radius: 6px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .col-name .list-thumb img { width: 100%; height: 100%; object-fit: cover; } .col-name .list-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .col-users, .col-opened, .col-owner { font-size: 13px; } .col-actions { display: flex; justify-content: flex-end; gap: 6px; } .list-fav-btn, .list-menu-btn { width: 28px; height: 28px; border: none; border-radius: 6px; background: transparent; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: color 0.18s, background 0.18s; } .list-fav-btn:hover, .list-menu-btn:hover { } .list-fav-btn.active, .list-fav-btn.active:hover { } /* --- CONTEXT MENU --- */ .board-ctx-menu { position: fixed; z-index: 9999; min-width: 220px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 14px; backdrop-filter: blur(16px); padding: 6px 0; display: none; animation: ctx-fade-in 0.15s ease; } .board-ctx-menu.visible { display: block; } @keyframes ctx-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .ctx-item { display: flex; align-items: center; gap: 10px; padding: 9px 18px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; user-select: none; } .ctx-item:hover { } .ctx-item--danger { } .ctx-item--danger:hover { } .ctx-item .ctx-icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .ctx-item .ctx-icon svg { width: 16px; height: 16px; } .ctx-divider { height: 1px; margin: 4px 0; } /* --- EMPTY STATE --- */ .boards-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; gap: 16px; text-align: center; } .boards-empty__icon { font-size: 48px; opacity: 0.5; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; } .boards-empty__icon svg { width: 48px; height: 48px; } .boards-empty__text { font-size: 16px; max-width: 340px; } .boards-empty__btn { margin-top: 12px; } /* --- LOADING --- */ .boards-loading { display: flex; align-items: center; justify-content: center; padding: 64px 24px; gap: 12px; font-size: 14px; } .boards-loading .spinner { width: 22px; height: 22px; border: 2px solid rgba(255, 255, 255, 0.08); border-top-color: #00b4ff; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* --- Board detail panel (info sidebar, future) --- */ .board-info-overlay { position: fixed; inset: 0; z-index: 9998; display: none; } .board-info-panel { position: fixed; top: 0; right: 0; width: 380px; max-width: 90vw; height: 100vh; border-left: 1px solid rgba(255, 255, 255, 0.08); z-index: 9999; padding: 28px 24px; display: none; overflow-y: auto; } /* --- Responsive --- */ @media (max-width: 1200px) { .canvas-dashboard { padding: 24px 16px 48px; } } @media (max-width: 840px) { .boards-grid { grid-template-columns: repeat(4, 1fr); } .boards-filters-row { flex-direction: column; align-items: flex-start; gap: 12px; } .boards-view-toggle { margin-left: 0; } .boards-list-header, .boards-list-row { grid-template-columns: 1fr 80px 50px; } .col-opened, .col-owner { display: none; } } @media (max-width: 640px) { .canvas-dashboard { padding: 16px 10px 32px; } .panel { padding: 18px 14px; border-radius: 18px; } .boards-grid { grid-template-columns: repeat(3, 1fr); } .boards-header-row { flex-direction: column; align-items: flex-start; gap: 12px; } .boards-actions { width: 100%; } .btn-primary, .btn-outline { flex: 1; text-align: center; } .template-card { width: 120px; } } /* ========================================================================= Template Sub-template Picker Modal ========================================================================= */ .tpl-sub-modal-overlay { position: fixed; inset: 0; z-index: 10010; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); } .tpl-sub-modal-popup { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 20px 24px; max-width: 420px; width: 100%; font-family: "Inter", system-ui, sans-serif; } .tpl-sub-modal-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; } .tpl-sub-modal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .tpl-sub-modal-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; transition: border-color 0.12s, background 0.12s; } .tpl-sub-modal-card:hover { } .tpl-sub-modal-card__icon { pointer-events: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; } .tpl-sub-modal-card__icon svg { width: 36px; height: 36px; } .tpl-sub-modal-card__label { font-size: 11px; text-align: center; white-space: nowrap; } /* ── Rotation angle badge (shown during Transformer rotate) ── */ #canvas-rotation-badge { position: fixed; z-index: 10010; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 13px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(143, 179, 255, 0.25); pointer-events: none; white-space: nowrap; backdrop-filter: blur(8px); display: none; }