/* ========================================================================== Theme layer — attribute-driven color themes. -------------------------------------------------------------------------- All default colors come from CSS custom properties (tokens.css / ui.css). This file swaps those token values when `html[data-theme=...]` is set and repairs the few remaining hard-coded light colors in components. Themes: light — default (current design), applied when data-theme is absent. dark — pleasant dark scheme with comfortable contrast. contrast— high-contrast scheme for low-vision users. sepia — warm parchment scheme with warm brown accents (light). Sepia is the proof-of-concept that the token architecture allows adding a full theme with a single block of CSS custom properties: because every base component reads its colors from tokens, a light-variant theme like sepia needs no component repairs — only new token values. To add another theme, copy the sepia block, rename the selector and swap the palette. Loaded last (after ui.css / visual-editor.css) so the overrides win at equal specificity. The attribute is set on by an inline script in header.php before CSS loads, so there is no flash of the wrong theme. ========================================================================== */ /* ============================= DARK THEME ============================= */ html[data-theme="dark"] { color-scheme: dark; scrollbar-color: color-mix(in srgb, var(--crm-accent) 45%, transparent) var(--crm-surface-muted); --crm-ink: #000000; --crm-on-accent: #ffffff; --crm-priority-high: #ea580c; /* Deep task-tree nesting accents - brighter in dark for legibility */ --crm-tree-level-3: #a78bfa; --crm-tree-level-deep: #e879f9; /* Legacy semantic aliases - dark equivalents */ --crm-muted: #93a59e; --crm-bg-hover: #1f2d28; --crm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --crm-accent-bg: rgba(46, 201, 160, 0.08); --crm-bg-inverse: #1e293b; --crm-text-inverse: #f8fafc; --crm-bg-secondary: #1f2d28; --crm-bg-subtle: #131d1a; --crm-border-light: rgba(255, 255, 255, 0.06); --crm-green: #4bd494; --crm-text-secondary: #93a59e; --color-primary-200: #134e3e; --color-primary-300: #1c6650; --crm-bg: #0f1614; --crm-bg-deep: #0a100e; --crm-surface: #16201d; --crm-surface-2: #1c2925; --crm-surface-muted: #121b18; --crm-surface-soft: #131d1a; --crm-control-bg: #1b2622; --crm-control-bg-muted: #121b18; --crm-border: #26352f; --crm-border-strong: #3a4d45; --crm-border-soft: #202e29; /* Modal/offcanvas/drawer/popover surfaces */ --crm-modal-bg-top: rgba(22, 32, 29, 0.97); --crm-modal-bg-bottom: rgba(18, 27, 24, 0.98); --crm-modal-accent: rgba(46, 201, 160, 0.14); --crm-modal-border: rgba(74, 96, 87, 0.55); --crm-popover-bg: rgba(22, 32, 29, 0.97); --crm-popover-border: rgba(74, 96, 87, 0.55); --crm-text: #e6f0ec; --crm-text-muted: #93a59e; --crm-text-soft: #80928a; --crm-accent: #2ec9a0; --crm-accent-strong: #26b18b; --crm-primary: #2ec9a0; --crm-primary-hover: #35d8ae; --crm-primary-soft: #10352b; --crm-primary-border: #2a5647; --crm-success: #4bd494; --crm-success-soft: #123a28; --crm-warning: #e8b64d; --crm-warning-soft: #3a2d10; --crm-warning-border: #5c481e; --crm-danger: #f07468; --crm-danger-soft: #3a1d19; --crm-danger-border: #5f2c26; --crm-info: #57bfd4; --crm-info-soft: #12333c; /* Calendar event hue-preserving dark variants */ --crm-cal-teal-bg: #0f2b28; --crm-cal-teal-border: #1e4a43; --crm-cal-teal-accent: #2ec9a0; --crm-cal-teal-text: #bce8e0; --crm-cal-violet-bg: #241d3d; --crm-cal-violet-border: #3d3170; --crm-cal-violet-accent: #a78bfa; --crm-cal-violet-text: #ddd4ff; --crm-cal-warning-bg: #33270f; --crm-cal-warning-border: #5e4a1a; --crm-cal-warning-accent: #e8b64d; --crm-cal-warning-text: #f4d99a; --crm-cal-success-bg: #10301f; --crm-cal-success-border: #1d5233; --crm-cal-success-accent: #4bd494; --crm-cal-success-text: #c6ecd6; --crm-cal-danger-bg: #361a18; --crm-cal-danger-border: #63302a; --crm-cal-danger-accent: #f07468; --crm-cal-danger-text: #f4c4bf; --crm-focus: rgba(46, 201, 160, 0.22); --crm-focus-ring: #2ec9a0; /* Loading/status overlay toast - keep the readable mid-green (white text needs a dark enough green; theme-relative mint would drop below 4.5:1) */ --crm-status-bg: #0f8f72; --crm-error-bg: #b54038; --color-primary-50: #0f2e26; --color-primary-100: #173f33; --color-primary-500: #2ec9a0; --color-primary-600: #26b18b; --color-primary-700: #3dd9b1; --color-neutral-0: #ffffff; --color-neutral-50: #101614; --color-neutral-100: #18211e; --color-neutral-200: #26352f; --color-neutral-300: #3a4d45; --color-neutral-500: #93a59e; --color-neutral-700: #bac9c3; --color-neutral-900: #e6f0ec; --color-danger-50: #2b1512; --color-danger-100: #3b1d19; --color-danger-500: #f07468; --color-danger-600: #f28c82; --color-warning-50: #2d2310; --color-warning-100: #3d3115; --color-warning-500: #e8b64d; --color-warning-600: #efc46b; --color-info-50: #11272e; --color-info-100: #173740; --color-info-500: #57bfd4; --color-info-600: #74cdde; --color-success-50: #112b1e; --color-success-100: #183b2a; --color-success-600: #4bd494; /* Bootstrap bridge — native BS components follow the dark palette too. */ --bs-primary: #2ec9a0; --bs-primary-rgb: 46, 201, 160; --bs-primary-bg-subtle: #10352b; --bs-primary-border-subtle: #2a5647; --bs-primary-text-emphasis: #3dd9b1; --bs-info: #2ec9a0; --bs-info-rgb: 46, 201, 160; --bs-info-bg-subtle: #10352b; --bs-info-border-subtle: #2a5647; --bs-info-text-emphasis: #3dd9b1; --bs-link-color: #3dd9b1; --bs-link-hover-color: #2ec9a0; --bs-link-color-rgb: 61, 217, 177; --bs-link-hover-color-rgb: 46, 201, 160; --bs-body-bg: #0f1614; --bs-body-bg-rgb: 15, 22, 20; --bs-body-color: #e6f0ec; --bs-body-color-rgb: 230, 240, 236; --bs-secondary-color: #93a59e; --bs-secondary-color-rgb: 147, 165, 158; --bs-secondary-bg: #1c2925; --bs-tertiary-bg: #121b18; --bs-emphasis-color: #e6f0ec; --bs-emphasis-color-rgb: 230, 240, 236; --bs-border-color: #26352f; --bs-border-color-rgb: 38, 53, 47; --bs-dropdown-bg: #1c2925; --bs-dropdown-color: #e6f0ec; --bs-dropdown-border-color: #3a4d45; --bs-dropdown-link-color: #e6f0ec; --bs-dropdown-link-hover-bg: rgba(46, 201, 160, 0.12); --bs-dropdown-link-hover-color: #e6f0ec; --bs-dropdown-link-active-bg: #2ec9a0; --bs-dropdown-link-active-color: #0a100e; --bs-popover-bg: #1c2925; --bs-popover-border-color: #3a4d45; --bs-table-color: #e6f0ec; --bs-table-color-rgb: 230, 240, 236; --bs-table-bg: transparent; --bs-table-border-color: #26352f; --bs-table-striped-bg: rgba(255, 255, 255, 0.02); --bs-table-hover-bg: rgba(46, 201, 160, 0.08); /* Shadows become deeper on dark surfaces. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.4); --crm-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.35); --crm-shadow-card: 0 16px 42px rgba(0, 0, 0, 0.45); --crm-shadow-hover: 0 24px 56px rgba(0, 0, 0, 0.55); } html[data-theme="dark"] body, html[data-theme="dark"] .crm-app { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; } html[data-theme="dark"] ::selection { background: color-mix(in srgb, var(--crm-accent) 28%, transparent); color: var(--crm-on-accent); } /* Visual editor (rich text) — global token set so that content rendered from the editor (comments, descriptions, ideas) follows the dark theme outside the editor container as well. */ html[data-theme="dark"] { --crm-ve-accent: var(--crm-primary); --crm-ve-accent-light: color-mix(in srgb, var(--crm-primary) 16%, transparent); --crm-ve-surface: #16201d; --crm-ve-surface-soft: #1b2421; --crm-ve-border: #2a3a33; --crm-ve-border-strong: #3b4f46; --crm-ve-text: #e6f0ec; --crm-ve-text-muted: #93a59e; --crm-ve-danger: #f07468; --crm-ve-success: #4bd494; } html[data-theme="contrast"] { --crm-ve-accent: var(--crm-primary); --crm-ve-accent-light: color-mix(in srgb, var(--crm-primary) 20%, transparent); --crm-ve-surface: #ffffff; --crm-ve-surface-soft: #ffffff; --crm-ve-border: #000000; --crm-ve-border-strong: #000000; --crm-ve-text: #000000; --crm-ve-text-muted: #1f1f1f; --crm-ve-danger: var(--crm-danger); --crm-ve-success: var(--crm-success); } html[data-theme="sepia"] { --crm-ve-accent: var(--crm-primary); --crm-ve-accent-light: color-mix(in srgb, var(--crm-primary) 16%, transparent); --crm-ve-surface: var(--crm-surface); --crm-ve-surface-soft: #f6efe0; --crm-ve-border: var(--crm-border); --crm-ve-border-strong: #c9b489; --crm-ve-text: var(--crm-text); --crm-ve-text-muted: #8a7657; --crm-ve-danger: var(--crm-danger); --crm-ve-success: var(--crm-success); } /* Gantt — scoped token set. */ html[data-theme="dark"] .crm-gantt-page { --gantt-blue: #10b981; --gantt-blue-2: #34d399; --gantt-green: #22c55e; --gantt-green-2: #4ade80; --gantt-orange: #fb923c; --gantt-orange-2: #fbbf24; --gantt-red: #f87171; --gantt-purple: #a78bfa; --gantt-gray: #94a3b8; --gantt-line: #26352f; --gantt-soft: #131d1a; --gantt-grid-line: #22302a; --gantt-row-line: #1c2925; --gantt-hover-bg: #1a2622; --gantt-color-active: #10b981; --gantt-color-success: #22c55e; --gantt-color-blocked: #fb923c; --gantt-color-review: #a78bfa; --gantt-color-archived: #94a3b8; --gantt-color-overdue: #f87171; --gantt-color-paused: #94a3b8; --gantt-color-new: #3b82f6; --gantt-color-release: #4ade80; --gantt-color-project: #60a5fa; } /* ---- Dark: component repairs for hard-coded light colors ---- */ /* Bootstrap surfaces */ html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .popover { background-color: var(--crm-surface-2); border-color: var(--crm-border-strong); } html[data-theme="dark"] .dropdown-item, html[data-theme="dark"] .popover-body { color: var(--crm-text); } html[data-theme="dark"] .popover .popover-header { background-color: var(--crm-bg-deep); border-color: var(--crm-border); color: var(--crm-text); } html[data-theme="dark"] .modal-content, html[data-theme="dark"] .offcanvas { background-color: var(--crm-surface); color: var(--crm-text); } html[data-theme="dark"] .toast { background-color: var(--crm-surface-2); color: var(--crm-text); } html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--crm-surface); color: var(--crm-text); } html[data-theme="dark"] .nav-tabs .nav-link { color: var(--crm-text-muted); } /* Page shells with hard-coded white / light-green backgrounds */ html[data-theme="dark"] .crm-dashboard-page, html[data-theme="dark"] .crm-admin-ai-page, html[data-theme="dark"] .kb-page, html[data-theme="dark"] .kb-toc-card, html[data-theme="dark"] .crm-global-search-page .crm-search-list, html[data-theme="dark"] .crm-calendar-page .crm-calendar-panel, html[data-theme="dark"] .crm-counterparties-page #counterpartiesTable th, html[data-theme="dark"] .crm-counterparties-page #counterpartiesTable td { background: var(--crm-surface); color: var(--crm-text); } html[data-theme="dark"] .kb-panel, html[data-theme="dark"] .kb-side-card, html[data-theme="dark"] .kb-toc-card .crm-knowledge-toc a { background: var(--crm-success-soft); color: var(--crm-text); } html[data-theme="dark"] .crm-task-detail-page .crm-task-page-head, html[data-theme="dark"] .crm-calendar-shell, html[data-theme="dark"] .crm-calendar-more { background: linear-gradient(180deg, var(--crm-surface) 0%, var(--crm-bg-deep) 100%); } html[data-theme="dark"] .crm-calendar-panel-head { background: linear-gradient(180deg, var(--crm-surface) 0%, var(--crm-bg-deep) 100%); } html[data-theme="dark"] .crm-gantt-page { background: var(--crm-surface); } html[data-theme="dark"] .crm-gantt-page .crm-gantt-shell { border-color: var(--crm-border-strong); background: radial-gradient(circle at 94% 0%, color-mix(in srgb, var(--crm-accent) 10%, transparent), transparent 30%), radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--crm-accent) 6%, transparent), transparent 28%), linear-gradient(180deg, var(--crm-surface) 0%, var(--crm-bg-deep) 100%); } /* Cards, agenda rows, lists */ html[data-theme="dark"] .crm-list-card, html[data-theme="dark"] .crm-calendar-agenda-item, html[data-theme="dark"] .crm-notifications-page .crm-notification-item, html[data-theme="dark"] .crm-gantt-deadline-card, html[data-theme="dark"] .crm-comment, html[data-theme="dark"] .crm-file-item, html[data-theme="dark"] .crm-dashboard-page .crm-week-mini-grid, html[data-theme="dark"] .crm-task-detail-page .crm-checklist-card.is-editing { background: var(--crm-surface-2); color: var(--crm-text); } /* Badges, dots, segmented controls */ html[data-theme="dark"] .crm-nav-badge, html[data-theme="dark"] .crm-topbar-badge, html[data-theme="dark"] .team-save-dot { background: var(--crm-surface-2); color: var(--crm-text); } html[data-theme="dark"] .crm-content #votesPeriodBtns, html[data-theme="dark"] .crm-content #commentsPeriodBtns, html[data-theme="dark"] .crm-content [data-tasks-view-toggle], html[data-theme="dark"] .crm-content [data-calendar-view-toggle], html[data-theme="dark"] .crm-content #projectsViewToggle, html[data-theme="dark"] .crm-content #tasksViewToggle, html[data-theme="dark"] .crm-content .crm-tasks-view-toggle, html[data-theme="dark"] .crm-content .crm-gantt-controls .btn-group, html[data-theme="dark"] .crm-content .team-segmented, html[data-theme="dark"] .modal .team-segmented { background: var(--crm-surface-2) !important; background-image: none !important; border-color: var(--crm-border) !important; box-shadow: none !important; color: var(--crm-text) !important; } html[data-theme="dark"] .crm-content [data-tasks-view-toggle] > .btn, html[data-theme="dark"] .crm-content [data-calendar-view-toggle] > .btn, html[data-theme="dark"] .crm-content [data-view-toggle] > .btn, html[data-theme="dark"] .crm-content #projectsViewToggle > .btn, html[data-theme="dark"] .crm-content #tasksViewToggle > .btn, html[data-theme="dark"] .crm-content .crm-tasks-view-toggle > .btn, html[data-theme="dark"] .crm-content .crm-gantt-controls .btn-group > .btn, html[data-theme="dark"] .crm-content #votesPeriodBtns > .btn, html[data-theme="dark"] .crm-content #commentsPeriodBtns > .btn, html[data-theme="dark"] .crm-content .crm-segmented > .crm-segmented-item, html[data-theme="dark"] .crm-content .team-segmented > .team-segmented-btn, html[data-theme="dark"] .modal .team-segmented > .team-segmented-btn { background: transparent !important; background-image: none !important; border-color: var(--crm-border) !important; color: var(--crm-text) !important; box-shadow: none !important; } html[data-theme="dark"] .crm-content [data-tasks-view-toggle] > .btn:hover, html[data-theme="dark"] .crm-content [data-calendar-view-toggle] > .btn:hover, html[data-theme="dark"] .crm-content [data-view-toggle] > .btn:hover, html[data-theme="dark"] .crm-content #projectsViewToggle > .btn:hover, html[data-theme="dark"] .crm-content #tasksViewToggle > .btn:hover, html[data-theme="dark"] .crm-content .crm-tasks-view-toggle > .btn:hover, html[data-theme="dark"] .crm-content .crm-gantt-controls .btn-group > .btn:hover, html[data-theme="dark"] .crm-content .crm-segmented > .crm-segmented-item:hover, html[data-theme="dark"] .crm-content .team-segmented > .team-segmented-btn:hover, html[data-theme="dark"] .modal .team-segmented > .team-segmented-btn:hover { background: color-mix(in srgb, var(--crm-accent) 12%, transparent) !important; color: var(--crm-text) !important; } html[data-theme="dark"] .crm-content [data-tasks-view-toggle] > .btn.active, html[data-theme="dark"] .crm-content [data-calendar-view-toggle] > .btn.active, html[data-theme="dark"] .crm-content [data-view-toggle] > .btn.active, html[data-theme="dark"] .crm-content #projectsViewToggle > .btn.active, html[data-theme="dark"] .crm-content #tasksViewToggle > .btn.active, html[data-theme="dark"] .crm-content .crm-tasks-view-toggle > .btn.active, html[data-theme="dark"] .crm-content .crm-gantt-controls .btn-group > .btn.active, html[data-theme="dark"] .crm-content [data-tasks-view-toggle] > .btn[aria-pressed="true"], html[data-theme="dark"] .crm-content [data-calendar-view-toggle] > .btn[aria-pressed="true"], html[data-theme="dark"] .crm-content .crm-segmented > .crm-segmented-item.is-active, html[data-theme="dark"] .crm-content .team-segmented > .team-segmented-btn.is-active, html[data-theme="dark"] .modal .team-segmented > .team-segmented-btn.is-active { background: var(--crm-primary) !important; background-image: none !important; color: var(--crm-on-accent) !important; } /* Nav + dropdown hover states */ html[data-theme="dark"] .crm-nav .nav-link.active, html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: color-mix(in srgb, var(--crm-accent) 14%, transparent); color: var(--crm-text); } html[data-theme="dark"] .crm-nav .crm-nav-icon { background: var(--crm-primary-soft); } html[data-theme="dark"] .crm-topbar-notify-popover li { background: var(--crm-surface-2); color: var(--crm-text); } html[data-theme="dark"] .crm-topbar-notify-popover li:hover { background: color-mix(in srgb, var(--crm-accent) 10%, transparent); } /* Form controls */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .crm-input, html[data-theme="dark"] .crm-select, html[data-theme="dark"] .crm-textarea, html[data-theme="dark"] .team-input, html[data-theme="dark"] .team-search-input { background-color: var(--crm-control-bg); color: var(--crm-text); border-color: var(--crm-border); } html[data-theme="dark"] .form-control:hover, html[data-theme="dark"] .form-select:hover, html[data-theme="dark"] .crm-input:hover, html[data-theme="dark"] .crm-select:hover, html[data-theme="dark"] .crm-textarea:hover, html[data-theme="dark"] .team-input:hover, html[data-theme="dark"] .team-search-input:hover { background-color: var(--crm-control-bg); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus, html[data-theme="dark"] .crm-input:focus, html[data-theme="dark"] .crm-select:focus, html[data-theme="dark"] .crm-textarea:focus, html[data-theme="dark"] textarea.form-control:focus, html[data-theme="dark"] .team-input:focus, html[data-theme="dark"] .team-search-input:focus { background-color: var(--crm-control-bg); color: var(--crm-text); } html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] .crm-input::placeholder, html[data-theme="dark"] .crm-textarea::placeholder { color: var(--crm-text-soft); } /* Alerts */ html[data-theme="dark"] .alert-warning { background: var(--crm-warning-soft); border-color: var(--crm-border-strong); color: var(--crm-text); } html[data-theme="dark"] .alert-danger { background: var(--crm-danger-soft); border-color: var(--crm-border-strong); color: var(--crm-text); } /* AI suggestion drawer */ html[data-theme="dark"] #aiSuggestionDrawer .offcanvas-header { background: linear-gradient(180deg, var(--crm-surface) 0%, var(--crm-bg-deep) 100%); } html[data-theme="dark"] #aiSuggestionDrawer .crm-metric-tile { background: var(--crm-surface-2); color: var(--crm-text); } /* Admin AI hint text */ html[data-theme="dark"] .crm-admin-page #adminAiCreateForm .form-text, html[data-theme="dark"] .crm-admin-page #adminAiEditForm .form-text, html[data-theme="dark"] .crm-admin-page #adminAiSecretForm .form-text { background: var(--crm-surface-2); color: var(--crm-text-soft); } /* Visual editor floating panels */ html[data-theme="dark"] .crm-ve-link-popover, html[data-theme="dark"] .crm-ve-image-settings-popover, html[data-theme="dark"] .crm-ve-image-toolbar, html[data-theme="dark"] .crm-ve-toast, html[data-theme="dark"] .crm-ve-resize-badge { background-color: var(--crm-ve-surface-soft); border-color: var(--crm-ve-border); color: var(--crm-ve-text); } html[data-theme="dark"] .crm-ve-link-popover input, html[data-theme="dark"] .crm-ve-image-settings-popover input { background-color: var(--crm-ve-surface); color: var(--crm-ve-text); } /* ---- Dark: light-only surfaces that the polish layer hard-codes ---- */ /* Secondary / ghost / light buttons: dark glass instead of white */ html[data-theme="dark"] .btn-light, html[data-theme="dark"] .crm-btn-secondary, html[data-theme="dark"] .btn-outline-secondary, html[data-theme="dark"] .crm-btn-ghost, html[data-theme="dark"] .crm-btn-subtle, html[data-theme="dark"] .crm-btn-muted { background: var(--crm-surface-2) !important; border-color: var(--crm-border) !important; color: var(--crm-text) !important; box-shadow: none !important; } html[data-theme="dark"] .btn-light:hover, html[data-theme="dark"] .crm-btn-secondary:hover, html[data-theme="dark"] .btn-outline-secondary:hover, html[data-theme="dark"] .crm-btn-ghost:hover, html[data-theme="dark"] .crm-btn-subtle:hover, html[data-theme="dark"] .crm-btn-muted:hover { background: var(--crm-primary-soft) !important; border-color: var(--crm-primary-border) !important; color: var(--crm-primary-hover) !important; } html[data-theme="dark"] .crm-dashboard-page #dashboardAiDigestActions .crm-dashboard-ai-action-btn, html[data-theme="dark"] .crm-dashboard-page #dashboardAiDigestActions .crm-dashboard-ai-action-open { background: var(--crm-surface-2) !important; border-color: var(--crm-border) !important; color: var(--crm-text) !important; box-shadow: none; } html[data-theme="dark"] .crm-counterparties-page #counterpartiesBulkActionsBar { background: var(--crm-surface-2) !important; border-color: var(--crm-border-strong) !important; color: var(--crm-text) !important; } html[data-theme="dark"] .crm-tasks-page .crm-task-row-actions-wrap .btn { background: var(--crm-surface-2) !important; border-color: var(--crm-border) !important; color: var(--crm-text) !important; } html[data-theme="dark"] .crm-my-day-page .crm-task-row-actions-wrap .btn, html[data-theme="dark"] .crm-my-week-page .crm-task-row-actions-wrap .btn { background: var(--crm-surface-2) !important; border-color: var(--crm-border) !important; color: var(--crm-text) !important; } /* Danger-soft buttons */ html[data-theme="dark"] .crm-btn-danger-soft, html[data-theme="dark"] .btn-outline-danger, html[data-theme="dark"] .crm-btn-danger, html[data-theme="dark"] .crm-btn-danger-icon, html[data-theme="dark"] .crm-icon-button-danger, html[data-theme="dark"] .crm-table .btn-outline-danger, html[data-theme="dark"] .crm-admin-actions .btn-outline-danger { background: var(--crm-surface-2); border-color: var(--crm-danger-border, var(--crm-border)); color: var(--crm-danger); box-shadow: none; } html[data-theme="dark"] .crm-btn-danger-soft:hover, html[data-theme="dark"] .btn-outline-danger:hover, html[data-theme="dark"] .crm-btn-danger:hover, html[data-theme="dark"] .crm-btn-danger-icon:hover, html[data-theme="dark"] .crm-icon-button-danger:hover { background: var(--crm-danger-soft); color: var(--crm-danger); } /* Badges, chips and buttons inside .crm-content: no bootstrap focus/active box-shadows (blue/white glows look like artifacts on dark surfaces). The :focus-visible ring (ui.css, !important) still applies for keyboard. */ html[data-theme="dark"] .crm-content .crm-badge, html[data-theme="dark"] .crm-content .badge, html[data-theme="dark"] .crm-content .crm-chip, html[data-theme="dark"] .crm-content .btn, html[data-theme="dark"] .crm-content .crm-table .btn, html[data-theme="dark"] .crm-content .crm-table .crm-badge, html[data-theme="dark"] .crm-content .crm-table .badge, html[data-theme="dark"] .crm-content .crm-table .crm-chip { box-shadow: none; } /* Task table select-all + row checkboxes: kill bootstrap inset/glow shadows. */ html[data-theme="dark"] .crm-tasks-page .crm-table-check-cell .form-check-input, html[data-theme="dark"] .crm-tasks-page .crm-table thead .form-check-input { box-shadow: none; } /* Sidebar collapse toggle */ html[data-theme="dark"] .crm-sidebar-toggle { background: var(--crm-surface-2); border-color: var(--crm-border); color: var(--crm-text-muted); box-shadow: none; } html[data-theme="dark"] .crm-sidebar-toggle:hover, html[data-theme="dark"] .crm-sidebar-toggle:focus-visible { background: var(--crm-primary-soft); border-color: var(--crm-primary-border); color: var(--crm-primary-hover); } /* Cards & panels: kill the white polish gradient */ html[data-theme="dark"] .crm-card, html[data-theme="dark"] .card, html[data-theme="dark"] .crm-section-card, html[data-theme="dark"] .crm-table-card, html[data-theme="dark"] .crm-toolbar-surface, html[data-theme="dark"] .crm-soft-panel, html[data-theme="dark"] .crm-metric-tile, html[data-theme="dark"] .crm-action-card, html[data-theme="dark"] .crm-form-panel, html[data-theme="dark"] .crm-info-panel, html[data-theme="dark"] .crm-dashboard-kpi, html[data-theme="dark"] .crm-empty-state, html[data-theme="dark"] .crm-empty, html[data-theme="dark"] .crm-error, html[data-theme="dark"] .crm-no-access, html[data-theme="dark"] .crm-counterparty-mobile-card, html[data-theme="dark"] .crm-searchable-tags, html[data-theme="dark"] .crm-dashboard-ai-summary-panel, html[data-theme="dark"] .crm-dashboard-ai-subcard, html[data-theme="dark"] .crm-tasks-view-surface { background: var(--crm-surface) !important; background-image: none !important; box-shadow: none !important; } html[data-theme="dark"] .crm-content .crm-empty-state, html[data-theme="dark"] .crm-content .crm-empty, html[data-theme="dark"] .crm-content .crm-error, html[data-theme="dark"] .crm-content .crm-no-access { background: var(--crm-surface) !important; background-image: none !important; } /* Kanban + calendar surfaces */ html[data-theme="dark"] .crm-kanban-col, html[data-theme="dark"] .crm-kanban-column, html[data-theme="dark"] .crm-kanban-card, html[data-theme="dark"] .crm-kanban-col-header, html[data-theme="dark"] .crm-calendar-panel, html[data-theme="dark"] .crm-calendar-side-card, html[data-theme="dark"] .crm-calendar-agenda-item, html[data-theme="dark"] .crm-calendar-local-nav, html[data-theme="dark"] .crm-calendar-weekday, html[data-theme="dark"] .crm-calendar-time-head, html[data-theme="dark"] .crm-calendar-time-head-spacer, html[data-theme="dark"] .crm-calendar-time-label, html[data-theme="dark"] .crm-calendar-day, html[data-theme="dark"] .crm-calendar-time-cell, html[data-theme="dark"] .crm-calendar-agenda-empty { background: var(--crm-surface) !important; background-image: none !important; } html[data-theme="dark"] .crm-kanban-page .crm-kanban-col-header { background: var(--crm-surface) !important; border-color: var(--crm-border) !important; } html[data-theme="dark"] .crm-calendar-day.is-muted, html[data-theme="dark"] .crm-calendar-day.is-weekend:not(.is-muted) { background: var(--crm-surface) !important; } html[data-theme="dark"] .crm-calendar-day:hover { background: var(--crm-surface-2) !important; } html[data-theme="dark"] .crm-calendar-day.is-today { background: var(--crm-primary-soft) !important; } html[data-theme="dark"] .crm-calendar-day-add { background: var(--crm-surface-2) !important; border-color: var(--crm-primary-border) !important; color: var(--crm-primary) !important; } html[data-theme="dark"] .crm-calendar-day-add:hover { background: var(--crm-primary-soft) !important; } html[data-theme="dark"] .crm-calendar-event { background: var(--crm-primary-soft) !important; border-color: var(--crm-primary-border) !important; border-left-color: var(--crm-primary) !important; color: var(--crm-text) !important; } /* Calendar events: hue-preserving dark variants */ html[data-theme="dark"] .crm-calendar-event.is-teal { background: var(--crm-cal-teal-bg) !important; border-color: var(--crm-cal-teal-border) !important; border-left-color: var(--crm-cal-teal-accent) !important; color: var(--crm-cal-teal-text) !important; } html[data-theme="dark"] .crm-calendar-event.is-violet { background: var(--crm-cal-violet-bg) !important; border-color: var(--crm-cal-violet-border) !important; border-left-color: var(--crm-cal-violet-accent) !important; color: var(--crm-cal-violet-text) !important; } html[data-theme="dark"] .crm-calendar-event.is-warning { background: var(--crm-cal-warning-bg) !important; border-color: var(--crm-cal-warning-border) !important; border-left-color: var(--crm-cal-warning-accent) !important; color: var(--crm-cal-warning-text) !important; } html[data-theme="dark"] .crm-calendar-event.is-success { background: var(--crm-cal-success-bg) !important; border-color: var(--crm-cal-success-border) !important; border-left-color: var(--crm-cal-success-accent) !important; color: var(--crm-cal-success-text) !important; } html[data-theme="dark"] .crm-calendar-event.is-danger { background: var(--crm-cal-danger-bg) !important; border-color: var(--crm-cal-danger-border) !important; border-left-color: var(--crm-cal-danger-accent) !important; color: var(--crm-cal-danger-text) !important; } html[data-theme="dark"] .crm-calendar-event.is-blue { background: var(--crm-primary-soft) !important; border-color: var(--crm-primary-border) !important; border-left-color: var(--crm-primary) !important; color: var(--crm-text) !important; } /* Chips */ html[data-theme="dark"] .crm-chip { background: var(--crm-surface-2); border-color: var(--crm-border); color: var(--crm-text-muted); } /* Searchable dropdown + topbar search field */ html[data-theme="dark"] .crm-searchable-dropdown { background: var(--crm-surface-2); border-color: var(--crm-border-strong); } html[data-theme="dark"] .input-group-text, html[data-theme="dark"] .crm-topbar .input-group .input-group-text, html[data-theme="dark"] .crm-topbar .input-group .form-control { background: var(--crm-control-bg) !important; background-image: none !important; border-color: var(--crm-border) !important; color: var(--crm-text) !important; } html[data-theme="dark"] .input-group-text.bg-transparent, html[data-theme="dark"] .crm-topbar .input-group .input-group-text.bg-transparent { background: transparent !important; } /* Nav hover no longer white */ html[data-theme="dark"] .crm-nav .nav-link:hover, html[data-theme="dark"] .crm-nav .nav-link:focus { background: var(--crm-surface-2); border-color: var(--crm-primary-border); color: var(--crm-text); box-shadow: none; } /* Tables: transparent rows so card bg shows through */ html[data-theme="dark"] .crm-content table.crm-table, html[data-theme="dark"] .crm-content .table.crm-table, html[data-theme="dark"] .crm-content table, html[data-theme="dark"] .crm-content .table { background: transparent !important; } html[data-theme="dark"] .crm-content table.crm-table tbody tr, html[data-theme="dark"] .crm-content .table.crm-table tbody tr, html[data-theme="dark"] .crm-content table.crm-table tbody td, html[data-theme="dark"] .crm-content .table.crm-table tbody td, html[data-theme="dark"] .crm-content table tbody tr, html[data-theme="dark"] .crm-content table tbody td, html[data-theme="dark"] .crm-content .table tbody tr, html[data-theme="dark"] .crm-content .table tbody td { background: transparent !important; } html[data-theme="dark"] .crm-content table.crm-table tbody tr:hover td, html[data-theme="dark"] .crm-content .table.crm-table tbody tr:hover td, html[data-theme="dark"] .crm-content table tbody tr:hover td, html[data-theme="dark"] .crm-content .table tbody tr:hover td { background: color-mix(in srgb, var(--crm-accent) 8%, transparent) !important; } html[data-theme="dark"] .crm-content table.crm-table tbody tr.is-selected td, html[data-theme="dark"] .crm-content .table.crm-table tbody tr.is-selected td, html[data-theme="dark"] .crm-content table tbody tr.is-selected td, html[data-theme="dark"] .crm-content .table tbody tr.is-selected td { background: color-mix(in srgb, var(--crm-accent) 14%, transparent) !important; } html[data-theme="dark"] .crm-content .table-striped > tbody > tr:nth-of-type(odd) > * { background: color-mix(in srgb, var(--crm-on-accent) 2%, transparent) !important; } /* Modals / offcanvas: shorthand kills the white gradient image */ html[data-theme="dark"] .modal-content, html[data-theme="dark"] .offcanvas { background: var(--crm-surface); color: var(--crm-text); } /* Automation + workflow panels */ html[data-theme="dark"] .crm-automation-brief-item, html[data-theme="dark"] .crm-workflow-action-panel { background: var(--crm-surface-2); border-color: var(--crm-border-strong); } html[data-theme="dark"] .crm-check-picker-item:has(input:checked), html[data-theme="dark"] .crm-schedule-option.is-active { background: var(--crm-primary-soft); border-color: var(--crm-primary-border); } /* Gantt scale + project rows */ html[data-theme="dark"] .crm-gantt-page .crm-gantt-scale-months > span, html[data-theme="dark"] .crm-gantt-page .crm-gantt-scale-main > span { background: var(--crm-surface-2); color: var(--crm-text-muted); } html[data-theme="dark"] .crm-gantt-page .crm-gantt-row--project, html[data-theme="dark"] .crm-gantt-page .crm-gantt-lane--project { background: var(--crm-primary-soft) !important; } html[data-theme="dark"] .crm-gantt-page .crm-gantt-row--project .crm-gantt-row-title, html[data-theme="dark"] .crm-gantt-page .crm-gantt-row--project strong { color: var(--crm-primary) !important; } /* Visual editor image toolbar keeps dark glass */ html[data-theme="dark"] .crm-ve-image-toolbar { background: var(--crm-ve-surface-soft) !important; border-color: var(--crm-ve-border); } /* Scroll hint pill */ html[data-theme="dark"] .table-responsive::after, html[data-theme="dark"] .crm-table-wrap::after { background: var(--crm-surface-2); border-color: var(--crm-border-strong); color: var(--crm-text-muted); } /* AI suggestion drawer tiles */ html[data-theme="dark"] #aiSuggestionDrawer .crm-metric-tile { background: var(--crm-surface-2); background-image: none; } /* ---- Dark: hardened overrides ---- The ui.css polish layer sets several light colors with !important (topbar glass, table head, KPI cards, nav icons). Mirror that pattern so the dark theme actually wins. */ html[data-theme="dark"] .crm-topbar { background: color-mix(in srgb, var(--crm-surface) 92%, transparent) !important; box-shadow: 0 1px 0 color-mix(in srgb, var(--crm-ink) 45%, transparent) !important; } html[data-theme="dark"] .crm-nav .nav-link:not(.active) .crm-nav-icon { background: var(--crm-primary-soft) !important; } html[data-theme="dark"] .crm-content table.crm-table thead th, html[data-theme="dark"] .crm-content .table.crm-table thead th { background: var(--crm-surface-2) !important; color: var(--crm-text-muted) !important; } html[data-theme="dark"] .crm-content table.crm-table a, html[data-theme="dark"] .crm-content .table.crm-table a{ color: var(--crm-text) !important; } html[data-theme="dark"] .crm-counterparties-page #counterpartiesTable th:last-child, html[data-theme="dark"] .crm-counterparties-page #counterpartiesTable td:last-child { background: var(--crm-surface) !important; box-shadow: -10px 0 16px color-mix(in srgb, var(--crm-ink) 35%, transparent) !important; } html[data-theme="dark"] .crm-counterparties-page #counterpartiesTable tbody tr:hover td:last-child { background: color-mix(in srgb, var(--crm-accent) 8%, transparent) !important; } html[data-theme="dark"] .crm-dashboard-table-wrap, html[data-theme="dark"] .crm-content .crm-dashboard-table-wrap .crm-table, html[data-theme="dark"] .crm-content .crm-dashboard-table-wrap tbody td { background: transparent !important; } html[data-theme="dark"] .crm-analytics-row-stats span { background: var(--crm-surface-2) !important; border-color: var(--crm-border) !important; color: var(--crm-text) !important; } html[data-theme="dark"] .crm-analytics-row-stats span.is-alert { background: color-mix(in srgb, var(--crm-danger) 14%, transparent) !important; border-color: color-mix(in srgb, var(--crm-danger) 40%, transparent) !important; color: var(--crm-danger) !important; } html[data-theme="dark"] .crm-content table.crm-table tbody td, html[data-theme="dark"] .crm-content .table.crm-table tbody td { color: var(--crm-text) !important; } html[data-theme="dark"] .crm-dashboard-page .crm-dashboard-kpi { border-color: var(--crm-border-strong) !important; background: var(--crm-surface) !important; } html[data-theme="dark"] .crm-badge.warning, html[data-theme="dark"] .crm-badge.blocked, html[data-theme="dark"] .crm-badge-warning { color: var(--crm-warning) !important; background-color: var(--crm-warning-soft) !important; } html[data-theme="dark"] .crm-card, html[data-theme="dark"] .card, html[data-theme="dark"] .crm-section-card, html[data-theme="dark"] .crm-table-card, html[data-theme="dark"] .crm-info-panel, html[data-theme="dark"] .crm-list-card { border-color: var(--crm-border-strong) !important; } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .crm-input, html[data-theme="dark"] .crm-select, html[data-theme="dark"] .crm-textarea, html[data-theme="dark"] .team-input, html[data-theme="dark"] .team-search-input { background-color: var(--crm-control-bg) !important; } /* Login page */ html[data-theme="dark"] body.crm-login-page .crm-login-panel, html[data-theme="dark"] body.crm-login-page .crm-login-panel-inner { background: var(--crm-surface); color: var(--crm-text); } html[data-theme="dark"] body.crm-login-page .crm-login-preview-top i, html[data-theme="dark"] body.crm-login-page .crm-login-preview-table, html[data-theme="dark"] body.crm-login-page .crm-login-preview-metric { background: var(--crm-surface-2); color: var(--crm-text); } html[data-theme="dark"] body.crm-login-page .crm-login-card .form-control, html[data-theme="dark"] body.crm-login-page .crm-login-card .form-select { background-color: var(--crm-control-bg); color: var(--crm-text); border-color: var(--crm-border-strong); } /* =========================== CONTRAST THEME =========================== */ html[data-theme="contrast"] { color-scheme: light; --crm-ink: #000000; --crm-on-accent: #ffffff; /* Orange priority badge: #c2410c gave only 5.18:1 with white text; the darker #9a3412 reaches 7.3:1 (WCAG AAA for text, 1.4.11 for the fill). */ --crm-priority-high: #9a3412; --crm-tree-level-3: #8b5cf6; --crm-tree-level-deep: #d946ef; /* Legacy semantic aliases - high-contrast equivalents */ --crm-muted: #1f1f1f; --crm-bg-hover: #e8e8e8; --crm-shadow-sm: none; --crm-accent-bg: rgba(0, 92, 68, 0.08); --crm-bg-inverse: #000000; --crm-text-inverse: #ffffff; --crm-bg-secondary: #e8e8e8; --crm-bg-subtle: #f2f2f2; --crm-border-light: rgba(0, 0, 0, 0.15); --crm-green: #005c44; --crm-text-secondary: #1f1f1f; --color-primary-200: #0a3b2e; --color-primary-300: #005c44; --crm-bg: #ffffff; --crm-bg-deep: #f2f2f2; --crm-surface: #ffffff; --crm-surface-2: #ffffff; --crm-surface-muted: #ffffff; --crm-surface-soft: #ffffff; --crm-control-bg: #ffffff; --crm-control-bg-muted: #ffffff; --crm-border: #1f1f1f; --crm-border-strong: #000000; --crm-border-soft: #1f1f1f; /* Modal/offcanvas/drawer/popover surfaces: solid white + black borders */ --crm-modal-bg-top: #ffffff; --crm-modal-bg-bottom: #ffffff; --crm-modal-accent: transparent; --crm-modal-border: #000000; --crm-popover-bg: #ffffff; --crm-popover-border: #000000; --crm-text: #000000; --crm-text-muted: #1f1f1f; --crm-text-soft: #1f1f1f; --crm-accent: #005c44; --crm-accent-strong: #00493a; --crm-primary: #005c44; --crm-primary-hover: #00493a; --crm-primary-soft: #e2f2ec; --crm-primary-border: #000000; --crm-success: #00602f; --crm-success-soft: #ffffff; --crm-warning: #7a4d00; --crm-warning-soft: #ffffff; /* Danger/warning button and badge borders inherit the pale base tints (#fecaca / #fde68a, ~1.4:1 on white) — far below the WCAG 1.4.11 3:1 non-text minimum. Pin them to the strong theme colors. */ --crm-warning-border: #7a4d00; --crm-danger: #a40000; --crm-danger-soft: #ffffff; --crm-danger-border: #a40000; --crm-info: #005a6e; --crm-info-soft: #ffffff; --crm-focus: rgba(0, 0, 0, 0.06); --crm-focus-ring: #000000; /* Loading/status overlay toast - brand dark green / deep red for AA */ --crm-status-bg: #005c44; --crm-error-bg: #a40000; /* Gantt dependency-obstacle stroke: the fixed amber #f59e0b is only ~2.15:1 on white, below the WCAG 1.4.11 3:1 minimum for informative graphics; the darker amber #9a5b00 reaches ~5.4:1. */ --crm-gantt-obstacle: #9a5b00; --color-primary-50: #e2f2ec; --color-primary-100: #cfe8de; --color-primary-500: #005c44; --color-primary-600: #00493a; --color-primary-700: #003d30; --color-neutral-0: #ffffff; --color-neutral-50: #ffffff; --color-neutral-100: #f2f2f2; --color-neutral-200: #1f1f1f; --color-neutral-300: #000000; --color-neutral-500: #1f1f1f; --color-neutral-700: #000000; --color-neutral-900: #000000; --color-danger-50: #ffffff; --color-danger-100: #ffffff; --color-danger-500: #a40000; --color-danger-600: #a40000; --color-warning-50: #ffffff; --color-warning-100: #ffffff; --color-warning-500: #7a4d00; --color-warning-600: #7a4d00; --color-info-50: #ffffff; --color-info-100: #ffffff; --color-info-500: #005a6e; --color-info-600: #005a6e; --color-success-50: #ffffff; --color-success-100: #ffffff; --color-success-600: #00602f; --bs-primary: #005c44; --bs-primary-rgb: 0, 92, 68; --bs-primary-bg-subtle: #e2f2ec; --bs-primary-border-subtle: #000000; --bs-primary-text-emphasis: #003d30; --bs-info: #005c44; --bs-info-rgb: 0, 92, 68; --bs-info-bg-subtle: #e2f2ec; --bs-info-border-subtle: #000000; --bs-info-text-emphasis: #003d30; --bs-link-color: #005c44; --bs-link-hover-color: #003d30; --bs-link-underline-opacity: 1; --bs-body-bg: #ffffff; --bs-body-bg-rgb: 255, 255, 255; --bs-body-color: #000000; --bs-body-color-rgb: 0, 0, 0; --bs-secondary-color: #1f1f1f; --bs-secondary-color-rgb: 31, 31, 31; --bs-secondary-bg: #ffffff; --bs-tertiary-bg: #ffffff; --bs-emphasis-color: #000000; --bs-emphasis-color-rgb: 0, 0, 0; --bs-border-color: #1f1f1f; --bs-border-color-rgb: 31, 31, 31; --bs-dropdown-bg: #ffffff; --bs-dropdown-color: #000000; --bs-dropdown-border-color: #000000; --bs-dropdown-link-color: #000000; --bs-dropdown-link-hover-bg: #e2f2ec; --bs-dropdown-link-hover-color: #000000; --bs-dropdown-link-active-bg: #005c44; --bs-dropdown-link-active-color: #ffffff; --bs-popover-bg: #ffffff; --bs-popover-border-color: #000000; --bs-table-color: #000000; --bs-table-color-rgb: 0, 0, 0; --bs-table-bg: transparent; --bs-table-border-color: #1f1f1f; --bs-table-striped-bg: #f2f2f2; --bs-table-hover-bg: #e2f2ec; /* Depth comes from borders, not shadows, in high-contrast mode. */ --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --crm-shadow-soft: none; --crm-shadow-card: none; --crm-shadow-hover: none; /* Flat UI: zero every Bootstrap shadow token too (buttons, cards, modals, dropdowns, popovers, toasts, offcanvas, accordion/pagination focus glows). Focus stays visible via the theme's outline-based focus ring. */ --bs-box-shadow: none; --bs-box-shadow-sm: none; --bs-box-shadow-lg: none; --bs-box-shadow-inset: none; --bs-btn-box-shadow: none; --bs-btn-active-shadow: none; --bs-btn-focus-box-shadow: none; --bs-card-box-shadow: none; --bs-dropdown-box-shadow: none; --bs-modal-box-shadow: none; --bs-offcanvas-box-shadow: none; --bs-popover-box-shadow: none; --bs-toast-box-shadow: none; --bs-accordion-btn-focus-box-shadow: none; --bs-pagination-focus-box-shadow: none; --bs-btn-close-focus-shadow: none; --bs-progress-box-shadow: none; } /* Flat UI: kill every hard-coded component shadow as well. The only exception is Bootstrap's table-cell background mechanism (an inset 9999px spread that paints striped/hover row backgrounds) - that is not a visual shadow, so it is restored for the table cells right below. */ html[data-theme="contrast"] *, html[data-theme="contrast"] *::before, html[data-theme="contrast"] *::after { box-shadow: none !important; text-shadow: none !important; } html[data-theme="contrast"] .table > :not(caption) > * > * { box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))) !important; } html[data-theme="contrast"] ::selection { background: var(--crm-primary); color: var(--crm-on-accent); } /* Underlined links and unmistakable focus ring. */ html[data-theme="contrast"] a { text-decoration: underline; } html[data-theme="contrast"] a:focus-visible, html[data-theme="contrast"] button:focus-visible, html[data-theme="contrast"] [tabindex]:focus-visible, html[data-theme="contrast"] input:focus-visible, html[data-theme="contrast"] select:focus-visible, html[data-theme="contrast"] textarea:focus-visible { outline: 3px solid var(--crm-ink); outline-offset: 2px; box-shadow: none !important; } /* Strong field borders. */ html[data-theme="contrast"] .form-control, html[data-theme="contrast"] .form-select, html[data-theme="contrast"] .crm-input, html[data-theme="contrast"] .crm-select, html[data-theme="contrast"] .crm-textarea, html[data-theme="contrast"] .team-input, html[data-theme="contrast"] .team-search-input { border-width: 2px; border-color: var(--crm-border-strong); } /* Card borders visible on white. */ html[data-theme="contrast"] .crm-card, html[data-theme="contrast"] .crm-section-card, html[data-theme="contrast"] .crm-info-panel, html[data-theme="contrast"] .crm-list-card, html[data-theme="contrast"] .crm-calendar-agenda-item, html[data-theme="contrast"] .crm-notifications-page .crm-notification-item, html[data-theme="contrast"] .kb-panel, html[data-theme="contrast"] .kb-side-card, html[data-theme="contrast"] .crm-topbar-notify-popover li { border-color: var(--crm-border-strong); } html[data-theme="contrast"] .table thead th { border-bottom-color: var(--crm-border-strong); } html[data-theme="contrast"] .table tbody td { border-color: var(--crm-text-muted); } html[data-theme="contrast"] .dropdown-menu, html[data-theme="contrast"] .popover { border-width: 2px; border-color: var(--crm-border-strong); } /* ---- Contrast: hardened overrides (mirror the !important polish layer) ---- */ html[data-theme="contrast"] .crm-topbar { border-bottom-color: var(--crm-border-strong) !important; box-shadow: none !important; } html[data-theme="contrast"] .crm-content table.crm-table thead th, html[data-theme="contrast"] .crm-content .table.crm-table thead th { background: var(--crm-surface) !important; color: var(--crm-text) !important; } html[data-theme="contrast"] .crm-content table.crm-table tbody td, html[data-theme="contrast"] .crm-content .table.crm-table tbody td { color: var(--crm-text) !important; } html[data-theme="contrast"] .crm-dashboard-page .crm-dashboard-kpi { border-color: var(--crm-border-strong) !important; background: var(--crm-surface) !important; } html[data-theme="contrast"] .crm-badge.warning, html[data-theme="contrast"] .crm-badge.blocked, html[data-theme="contrast"] .crm-badge-warning { color: var(--crm-warning) !important; background-color: var(--crm-surface) !important; } html[data-theme="contrast"] .crm-card, html[data-theme="contrast"] .card, html[data-theme="contrast"] .crm-section-card, html[data-theme="contrast"] .crm-table-card, html[data-theme="contrast"] .crm-info-panel { border-color: var(--crm-border-strong) !important; } html[data-theme="contrast"] .form-control, html[data-theme="contrast"] .form-select, html[data-theme="contrast"] .crm-input, html[data-theme="contrast"] .crm-select, html[data-theme="contrast"] .crm-textarea, html[data-theme="contrast"] .team-input, html[data-theme="contrast"] .team-search-input { background-color: var(--crm-surface) !important; border-color: var(--crm-border-strong) !important; } /* Component boundaries that fall back to the pale --color-primary-100 tint (~1.3:1 on white): task-key badges, icon-button hover states, the sidebar toggle and KPI-card hover. WCAG 1.4.11 needs >= 3:1; the dark brand green gives 8:1 so every boundary is unmistakable in high-contrast mode. */ html[data-theme="contrast"] .crm-task-key-badge, html[data-theme="contrast"] .crm-inline-icon-btn:hover, html[data-theme="contrast"] .crm-inline-icon-btn:focus, html[data-theme="contrast"] .crm-sidebar-toggle:hover, html[data-theme="contrast"] .crm-sidebar-toggle:focus-visible, html[data-theme="contrast"] .crm-sidebar-collapsed .crm-sidebar-toggle, html[data-theme="contrast"] .crm-dashboard-kpi:hover, html[data-theme="contrast"] .crm-topbar #sidebarToggle:hover { border-color: var(--crm-primary) !important; } /* Active nav / dropdown hover: light-green fill with black text. */ html[data-theme="contrast"] .crm-nav .nav-link.active, html[data-theme="contrast"] .dropdown-item:hover, html[data-theme="contrast"] .dropdown-item:focus { background-color: var(--crm-primary-soft); color: var(--crm-text); } html[data-theme="contrast"] .crm-nav .nav-link.active { box-shadow: inset 3px 0 0 var(--crm-primary); } /* Muted helper text stays readable: bootstrap .text-muted consumes --bs-secondary-color, already overridden to a dark gray above. */ /* Bootstrap .text-danger/.text-success/.text-warning: the stock reds/greens are too dark for WCAG AA on dark surfaces, so map them to theme tokens. */ html[data-theme="dark"] .text-danger, html[data-theme="contrast"] .text-danger { color: var(--crm-danger); } html[data-theme="dark"] .text-success, html[data-theme="contrast"] .text-success { color: var(--crm-success); } html[data-theme="dark"] .text-warning, html[data-theme="contrast"] .text-warning { color: var(--crm-warning); } /* ---- Contrast: brand-green primary buttons ---- The ui.css polish layer hard-codes a mid-green gradient for primary buttons; high-contrast needs the dark brand green + white text. */ html[data-theme="contrast"] .crm-btn-primary, html[data-theme="contrast"] .btn.crm-btn-primary { background: var(--crm-primary) !important; border-color: var(--crm-primary) !important; color: var(--crm-on-accent) !important; box-shadow: none !important; } html[data-theme="contrast"] .crm-btn-primary:hover, html[data-theme="contrast"] .crm-btn-primary:focus, html[data-theme="contrast"] .btn.crm-btn-primary:hover, html[data-theme="contrast"] .btn.crm-btn-primary:focus { background: var(--crm-primary-hover) !important; border-color: var(--crm-primary-hover) !important; color: var(--crm-on-accent) !important; box-shadow: none !important; } /* Secondary / ghost / outline buttons: white chips with black borders. The base polish rule uses a 10% ink tint border that is nearly invisible on white in high-contrast mode. */ html[data-theme="contrast"] .btn-light, html[data-theme="contrast"] .crm-btn-secondary, html[data-theme="contrast"] .btn-outline-secondary, html[data-theme="contrast"] .crm-btn-ghost, html[data-theme="contrast"] .crm-btn-subtle, html[data-theme="contrast"] .crm-btn-muted { background: var(--crm-surface) !important; border-color: var(--crm-border-strong) !important; color: var(--crm-text) !important; box-shadow: none !important; } html[data-theme="contrast"] .btn-light:hover, html[data-theme="contrast"] .crm-btn-secondary:hover, html[data-theme="contrast"] .btn-outline-secondary:hover, html[data-theme="contrast"] .crm-btn-ghost:hover, html[data-theme="contrast"] .crm-btn-subtle:hover, html[data-theme="contrast"] .crm-btn-muted:hover { background: var(--crm-primary-soft) !important; border-color: var(--crm-primary-border) !important; color: var(--crm-text) !important; box-shadow: none !important; } /* Focus rings stay brand green, not blue. */ html[data-theme="contrast"] .form-control:focus, html[data-theme="contrast"] .form-select:focus, html[data-theme="contrast"] .crm-input:focus, html[data-theme="contrast"] .crm-select:focus, html[data-theme="contrast"] .crm-textarea:focus { border-color: var(--crm-primary) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--crm-primary) 25%, transparent) !important; } html[data-theme="contrast"] .form-check-input:checked { background-color: var(--crm-primary) !important; border-color: var(--crm-primary) !important; } /* ---- Contrast: no blue accents; every interactive surface is brand green; muted slate-grays become near-black so small text meets WCAG AA. ---- */ /* Links and link-colored text: light green -> dark brand green (7.9:1). */ html[data-theme="contrast"] .crm-gantt-page .crm-gantt-row-main strong a, html[data-theme="contrast"] .crm-gantt-page .crm-gantt-row-main a, html[data-theme="contrast"] .crm-gantt-page .crm-gantt-row-title:hover, html[data-theme="contrast"] .kb-tabs .nav-link.active, html[data-theme="contrast"] .crm-type-badge.badge-team, html[data-theme="contrast"] .crm-type-badge.badge-department { color: var(--crm-primary) !important; } html[data-theme="contrast"] .kb-tabs .nav-link.active { border-bottom-color: var(--crm-primary) !important; } /* Brand icon tints: the --crm-blue/--crm-green fallbacks were mid-green; in contrast they resolve to the dark brand green. */ html[data-theme="contrast"] .crm-icon-team, html[data-theme="contrast"] .crm-icon-department { color: var(--crm-primary) !important; } /* Knowledge-base draft badge: blue -> green-tinted. */ html[data-theme="contrast"] .kb-status-draft { background-color: var(--crm-primary-soft) !important; color: var(--crm-primary) !important; } /* Checkboxes: black border instead of bluish-gray. */ html[data-theme="contrast"] .form-check-input { border-color: var(--crm-border-strong) !important; } /* Topbar icon buttons (bell, search): slate -> near-black. */ html[data-theme="contrast"] .crm-topbar [data-global-notifications], html[data-theme="contrast"] .crm-topbar [data-search-toggle], html[data-theme="contrast"] .crm-topbar .crm-btn-icon, html[data-theme="contrast"] .crm-topbar [data-profile-dropdown] .dropdown-toggle { color: var(--crm-text-muted) !important; } /* Muted helper texts and icons that hard-code slate/blue-gray -> near-black. */ html[data-theme="contrast"] .crm-gantt-page .crm-gantt-row-meta, html[data-theme="contrast"] .crm-gantt-page .crm-gantt-search-icon, html[data-theme="contrast"] .crm-tree-members-badge, html[data-theme="contrast"] .crm-gantt-page .crm-gantt-empty-icon { color: var(--crm-text-muted) !important; } /* Calendar muted days: light slate -> dark gray (2.4:1 -> 13:1). */ html[data-theme="contrast"] .crm-calendar-day.is-muted, html[data-theme="contrast"] .crm-calendar-day.is-muted .crm-calendar-day-number { color: var(--crm-text-muted) !important; } html[data-theme="contrast"] .crm-calendar-event-time { color: var(--crm-primary) !important; } /* Kanban avatars: white-on-pale-green (1.1:1) -> white-on-brand-green (7.9:1). */ html[data-theme="contrast"] .crm-kanban-avatar { background: var(--crm-primary) !important; color: var(--crm-on-accent) !important; border-color: var(--crm-border-strong) !important; } /* Kanban overdue date: mid red -> contrast red (7.2:1). */ html[data-theme="contrast"] .crm-kanban-date-danger { color: var(--crm-danger) !important; } /* Knowledge badges: gray on gray (4.39:1) -> near-black (13:1). */ html[data-theme="contrast"] .kb-type-badge, html[data-theme="contrast"] .kb-status-archived { color: var(--crm-text-muted) !important; } /* Gantt status chips: slate text -> near-black; active dot blue -> green. */ html[data-theme="contrast"] .crm-gantt-page .crm-chip-status { color: var(--crm-text-muted) !important; background: var(--crm-surface) !important; border-color: var(--crm-border-strong) !important; } html[data-theme="contrast"] .crm-gantt-page .crm-chip-status[aria-pressed="true"], html[data-theme="contrast"] .crm-gantt-page .crm-chip-status.is-active { color: var(--crm-primary) !important; background: var(--crm-primary-soft) !important; border-color: var(--crm-primary) !important; } html[data-theme="contrast"] .crm-gantt-page .crm-chip-dot--active, html[data-theme="contrast"] .crm-gantt-page .crm-chip-dot--success { background: var(--crm-primary) !important; } /* Gantt scale headers, KPI captions, deadline tiles, work-mode hint: slate/blue-gray text -> near-black; blue bar/dot hues -> brand green. */ html[data-theme="contrast"] .crm-gantt-page .crm-gantt-scale-months > span { color: var(--crm-text-muted) !important; background: var(--crm-surface) !important; } html[data-theme="contrast"] .crm-gantt-page .crm-gantt-kpi-card small, html[data-theme="contrast"] .crm-gantt-page .crm-gantt-kpi-button small, html[data-theme="contrast"] .crm-gantt-page .crm-gantt-summary-grid .crm-metric-tile small { color: var(--crm-text-muted) !important; } html[data-theme="contrast"] .crm-gantt-page .crm-gantt-deadline-date { color: var(--crm-primary) !important; background: var(--crm-surface) !important; border-color: var(--crm-border-strong) !important; } html[data-theme="contrast"] .crm-gantt-page .crm-mobile-work-mode-hint { color: var(--crm-text-muted) !important; background: var(--crm-surface) !important; border-color: var(--crm-border-strong) !important; } /* Gantt bars: the blue "active" / navy "project" hues become brand green. */ html[data-theme="contrast"] .crm-gantt-page .crm-gantt-bar--active, html[data-theme="contrast"] .crm-gantt-page .crm-gantt-bar--project { background: var(--crm-primary) !important; } html[data-theme="contrast"] .crm-gantt-page .crm-gantt-bar--new, html[data-theme="contrast"] .crm-gantt-page .crm-gantt-bar--release, html[data-theme="contrast"] .crm-gantt-page .crm-gantt-bar--success { background: var(--crm-primary) !important; } /* Gantt status tokens: swap the blue "active" (#0369a1) / navy "project" (#1e3a5f) base hues for brand green and darken the light grid lines, so every gantt surface (bars, badges, dots, progress, hover) is green-driven and AA-safe — bar labels are white on these fills. */ html[data-theme="contrast"] .crm-gantt-page { --gantt-blue: #005c44; --gantt-blue-2: #006b4d; --gantt-green: #00602f; --gantt-green-2: #00734f; /* Milestone gradient light end: #d97706 is only 3.19:1 on white; use the darker orange so the whole diamond stays >= 5:1 against the page. */ --gantt-orange: #b45309; --gantt-orange-2: #b45309; --gantt-red: #b91c1c; --gantt-purple: #7c3aed; --gantt-gray: #4b5563; --gantt-line: #000000; --gantt-soft: #ffffff; --gantt-grid-line: #000000; --gantt-row-line: #1f1f1f; --gantt-hover-bg: rgba(0, 92, 68, 0.08); --gantt-color-new: #006b4d; --gantt-color-active: #005c44; --gantt-color-review: #7c3aed; --gantt-color-release: #006b4d; --gantt-color-success: #00602f; --gantt-color-blocked: #b45309; --gantt-color-paused: #4b5563; --gantt-color-archived: #475569; --gantt-color-overdue: #b91c1c; --gantt-color-project: #005c44; } /* Visual editor (rich text): blue accent -> brand green; muted text near-black so helper labels meet WCAG AA. */ html[data-theme="contrast"] .crm-ve-editor { --crm-ve-accent: #005c44; --crm-ve-accent-light: rgba(0, 92, 68, 0.12); --crm-ve-text-muted: #1f1f1f; } /* Task tags use user-chosen background colors; in the low-vision theme they become white chips with black text and a 2px black ring, so any user color stays readable (21:1). */ html[data-theme="contrast"] .task-tag { background-color: var(--crm-surface) !important; color: var(--crm-text) !important; box-shadow: inset 0 0 0 2px var(--crm-ink) !important; text-decoration: none !important; } html[data-theme="contrast"] .task-tag.task-tag--more { color: var(--crm-text) !important; } /* API status toast: mid-green bg + white text (4.0:1) -> brand green (7.9:1). */ html[data-theme="contrast"] #crmApiStatusBar { background: var(--crm-primary) !important; color: var(--crm-on-accent) !important; } /* Plain chips and gantt week labels: slate -> near-black (4.7:1 -> 13:1). */ html[data-theme="contrast"] .crm-chip.crm-chip-plain { color: var(--crm-text-muted) !important; border-color: var(--crm-border-strong) !important; background: var(--crm-surface) !important; } html[data-theme="contrast"] .crm-gantt-page .crm-gantt-scale-main > span { color: var(--crm-text-muted) !important; } /* Gantt overdue inside the deadline tile: mid green on pale green (3.6:1) -> dark brand green (7.9:1). */ html[data-theme="contrast"] .crm-gantt-page .crm-gantt-deadline-date em { color: var(--crm-primary) !important; } /* Notification counter: gradient red bg reads as transparent to audits; give it a solid dark-red surface so white text is guaranteed AA. */ html[data-theme="contrast"] .crm-topbar [data-global-notifications] .crm-notification-counter { background: var(--crm-danger) !important; background-image: none !important; border-color: var(--crm-border-strong) !important; color: var(--crm-on-accent) !important; box-shadow: none !important; } /* Calendar month grid uses --crm-border as the 1px grid lines; in contrast that is near-black, which is correct, but day cells must stay opaque white so the dark lines do not bleed through the numbers. */ html[data-theme="contrast"] .crm-calendar-month-grid { background: var(--crm-ink) !important; } html[data-theme="contrast"] .crm-calendar-day, html[data-theme="contrast"] .crm-calendar-day.is-muted, html[data-theme="contrast"] .crm-calendar-day.is-weekend:not(.is-muted), html[data-theme="contrast"] .crm-calendar-day.is-today, html[data-theme="contrast"] .crm-calendar-day:hover { background: var(--crm-surface) !important; box-shadow: none !important; } html[data-theme="contrast"] .crm-calendar-day.is-today .crm-calendar-day-number { background: var(--crm-primary) !important; color: var(--crm-on-accent) !important; } /* Bootstrap text-bg-light badges (notifications page) hard-code a light background via --bs-light-rgb with !important; swap it for theme tokens. */ html[data-theme="dark"] .badge.text-bg-light, html[data-theme="dark"] span.badge.text-bg-light { background-color: var(--crm-surface-2) !important; color: var(--crm-text) !important; } html[data-theme="contrast"] .badge.text-bg-light, html[data-theme="contrast"] span.badge.text-bg-light { background-color: var(--crm-surface) !important; color: var(--crm-text) !important; border: 1px solid var(--crm-border-strong) !important; } /* ---- Footer ---- layout.css hard-codes the footer glass as white (rgba(255,255,255,0.9)), a blue hover tint and a pale-yellow update badge. Repair those for the dark and contrast themes so the footer matches the rest of the page. */ html[data-theme="dark"] .crm-footer { background: var(--crm-surface) !important; border-top-color: var(--crm-border-strong) !important; } html[data-theme="dark"] .crm-footer a:hover { color: var(--crm-primary-hover) !important; background: var(--crm-primary-soft) !important; } html[data-theme="dark"] .crm-footer-update-badge { background: var(--crm-warning-soft) !important; border-color: var(--crm-border-strong) !important; color: var(--crm-warning) !important; } html[data-theme="contrast"] .crm-footer { border-top-width: 2px; border-top-color: var(--crm-border-strong) !important; } html[data-theme="contrast"] .crm-footer a:hover { color: var(--crm-primary-hover) !important; background: var(--crm-primary-soft) !important; } html[data-theme="contrast"] .crm-footer-update-badge { border-color: var(--crm-border-strong) !important; background: var(--crm-surface) !important; color: var(--crm-text) !important; } /* ============================== SEPIA THEME ============================== Warm parchment palette. A light theme, so it overrides ONLY token values: the token architecture means zero component repairs are required for a light-variant theme (contrast to dark/contrast, which need overrides). */ html[data-theme="sepia"] { color-scheme: light; scrollbar-color: color-mix(in srgb, var(--crm-accent) 45%, transparent) var(--crm-surface-muted); --crm-ink: #3d3120; --crm-on-accent: #ffffff; --crm-priority-high: #ea580c; /* Deep task-tree nesting accents - keep the light decorative tints */ --crm-tree-level-3: #c4b5fd; --crm-tree-level-deep: #f0abfc; /* Legacy semantic aliases - warm equivalents */ --crm-muted: #6d5f43; --crm-bg-hover: #f0e7d1; --crm-shadow-sm: 0 1px 2px rgba(61, 49, 32, 0.05); --crm-accent-bg: rgba(154, 91, 30, 0.08); --crm-bg-inverse: #4a3d28; --crm-text-inverse: #fdfaf2; --crm-bg-secondary: #efe6d0; --crm-bg-subtle: #f6efdd; --crm-border-light: rgba(61, 49, 32, 0.05); --crm-green: #6b8f3a; --crm-text-secondary: #6d5f43; --color-primary-200: #e5d3a8; --color-primary-300: #d9c08e; --crm-bg: #f4edde; --crm-bg-deep: #ece2cc; --crm-surface: #fbf7ec; --crm-surface-2: #f6efdd; --crm-surface-muted: #f4eddb; --crm-surface-soft: #f6efdd; --crm-control-bg: #fdfaf2; --crm-control-bg-muted: #f3ead5; --crm-border: #dccdab; --crm-border-strong: #c8b68a; --crm-border-soft: #e6dcc0; /* Modal/offcanvas/drawer/popover surfaces - warm glass */ --crm-modal-bg-top: rgba(251, 247, 236, 0.98); --crm-modal-bg-bottom: rgba(246, 239, 221, 0.97); --crm-modal-accent: rgba(154, 91, 30, 0.1); --crm-modal-border: rgba(61, 49, 32, 0.12); --crm-popover-bg: rgba(251, 247, 236, 0.97); --crm-popover-border: rgba(61, 49, 32, 0.12); --crm-text: #3d3120; --crm-text-muted: #6d5f43; --crm-text-soft: #8d7c5c; --crm-accent: #9a5b1e; --crm-accent-strong: #854d14; --crm-primary: #9a5b1e; --crm-primary-hover: #854d14; --crm-primary-soft: #f3e6cd; --crm-primary-border: #d9c08e; --crm-success: #4d7a26; --crm-success-soft: #e9f0da; --crm-warning: #8a5c00; --crm-warning-soft: #f7ecd2; --crm-warning-border: #e6d3a3; --crm-danger: #b03e28; --crm-danger-soft: #f8e6de; --crm-danger-border: #ecc3b4; --crm-info: #1e6b5e; --crm-info-soft: #dcebe2; --crm-focus: rgba(154, 91, 30, 0.16); --crm-focus-ring: #9a5b1e; /* Loading/status overlay toast - warm brown / brick red match the palette */ --crm-status-bg: #9a5b1e; --crm-error-bg: #b03e28; --color-primary-50: #f7ecd9; --color-primary-100: #eedfc2; --color-primary-500: #9a5b1e; --color-primary-600: #854d14; --color-primary-700: #6f3f0d; --color-neutral-0: #ffffff; --color-neutral-50: #f4edde; --color-neutral-100: #ece2cc; --color-neutral-200: #dccdab; --color-neutral-300: #c8b68a; --color-neutral-500: #6d5f43; --color-neutral-700: #54472e; --color-neutral-900: #3d3120; --color-danger-50: #f8e6de; --color-danger-100: #f2d2c3; --color-danger-500: #b03e28; --color-danger-600: #993524; --color-warning-50: #f7ecd2; --color-warning-100: #f0ddb0; --color-warning-500: #8a5c00; --color-warning-600: #744c00; --color-info-50: #dcebe2; --color-info-100: #c4ddd0; --color-info-500: #1e6b5e; --color-info-600: #17594e; --color-success-50: #e9f0da; --color-success-100: #d5e3bb; --color-success-600: #4d7a26; /* Bootstrap bridge - native BS components follow the warm palette. */ --bs-primary: #9a5b1e; --bs-primary-rgb: 154, 91, 30; --bs-primary-bg-subtle: #eedfc2; --bs-primary-border-subtle: #d9c08e; --bs-primary-text-emphasis: #6f3f0d; --bs-info: #9a5b1e; --bs-info-rgb: 154, 91, 30; --bs-info-bg-subtle: #eedfc2; --bs-info-border-subtle: #d9c08e; --bs-info-text-emphasis: #6f3f0d; --bs-link-color: #9a5b1e; --bs-link-hover-color: #854d14; --bs-link-color-rgb: 154, 91, 30; --bs-link-hover-color-rgb: 133, 77, 20; --bs-body-bg: #f4edde; --bs-body-bg-rgb: 244, 237, 222; --bs-body-color: #3d3120; --bs-body-color-rgb: 61, 49, 32; --bs-secondary-color: #6d5f43; --bs-secondary-color-rgb: 109, 95, 67; --bs-secondary-bg: #f6efdd; --bs-tertiary-bg: #f3ead5; --bs-emphasis-color: #3d3120; --bs-emphasis-color-rgb: 61, 49, 32; --bs-border-color: #dccdab; --bs-border-color-rgb: 220, 205, 171; --bs-dropdown-bg: #fbf7ec; --bs-dropdown-color: #3d3120; --bs-dropdown-border-color: #c8b68a; --bs-dropdown-link-color: #3d3120; --bs-dropdown-link-hover-bg: rgba(154, 91, 30, 0.1); --bs-dropdown-link-hover-color: #3d3120; --bs-dropdown-link-active-bg: #9a5b1e; --bs-dropdown-link-active-color: #ffffff; --bs-popover-bg: #fbf7ec; --bs-popover-border-color: #c8b68a; --bs-table-color: #3d3120; --bs-table-color-rgb: 61, 49, 32; --bs-table-bg: transparent; --bs-table-border-color: #dccdab; --bs-table-striped-bg: rgba(61, 49, 32, 0.03); --bs-table-hover-bg: rgba(154, 91, 30, 0.07); /* Shadows take a warm dark tint. */ --shadow-sm: 0 1px 2px rgba(61, 49, 32, 0.05); --shadow-md: 0 1px 3px rgba(61, 49, 32, 0.07), 0 4px 12px rgba(61, 49, 32, 0.05); --shadow-lg: 0 1px 3px rgba(61, 49, 32, 0.09), 0 8px 24px rgba(61, 49, 32, 0.07); --crm-shadow-soft: 0 10px 24px rgba(61, 49, 32, 0.08); --crm-shadow-card: 0 16px 42px rgba(61, 49, 32, 0.1); --crm-shadow-hover: 0 24px 56px rgba(61, 49, 32, 0.14); } /* Gantt — scoped warm token set. The base light palette uses a blue "active" (#0369a1) and navy "project" (#1e3a5f); sepia swaps those for warm tones so no cold/blue accents remain on the warm parchment (bars, dots, badges). */ html[data-theme="sepia"] .crm-gantt-page { --gantt-blue: #4d7a26; --gantt-blue-2: #5c8a2e; --gantt-green: #3f8a4e; --gantt-green-2: #4d9a5a; --gantt-orange: #b45309; --gantt-orange-2: #c9761a; --gantt-red: #b03e28; --gantt-purple: #7c3aed; --gantt-gray: #8a7a58; --gantt-line: #e6dcc0; --gantt-soft: #f6efdd; --gantt-grid-line: #eadfc4; --gantt-row-line: #f0e8d4; --gantt-hover-bg: rgba(154, 91, 30, 0.06); --gantt-color-active: #9a5b1e; --gantt-color-success: #4d7a26; --gantt-color-blocked: #b45309; --gantt-color-review: #7c3aed; --gantt-color-archived: #6d5f43; --gantt-color-overdue: #b03e28; --gantt-color-paused: #8a7a58; --gantt-color-new: #3f8a4e; --gantt-color-release: #1e6b5e; --gantt-color-project: #6b4a1f; }