/* ============================================================================ LIGHT B THEME - Complete Color System Соответствует: ui-color-guide.md (Шаги 1-24) ========================================================================== */ /* ========== GLOBAL SEMANTIC TOKENS ========== */ :root { color-scheme: light; /* Fallbacks for themes that do not override these explicitly */ --color-secondary-text: var(--color-text-secondary); --color-border: var(--color-border-normal); /* Text on dark overlays */ --color-text-on-dark: #FFFFFF; /* Neutral deep background for viewers/preview canvases */ --color-bg-ink: #0B0B0B; /* Overlay scrims */ --color-scrim-faint: rgba(0, 0, 0, 0.05); --color-scrim-light: rgba(0, 0, 0, 0.2); --color-scrim-weak: rgba(0, 0, 0, 0.3); --color-scrim: rgba(0, 0, 0, 0.4); --color-scrim-strong: rgba(0, 0, 0, 0.6); --color-scrim-heavy: rgba(0, 0, 0, 0.7); --color-scrim-intense: rgba(0, 0, 0, 0.8); /* Light glass on dark surfaces */ --color-glass-light: rgba(255, 255, 255, 0.1); --color-glass-strong: rgba(255, 255, 255, 0.2); /* Heatmap defaults (override per theme as needed) */ --color-heatmap-empty: var(--color-border-strong); --color-heatmap-low: var(--color-primary-light); --color-heatmap-mid: var(--color-primary); --color-heatmap-high: var(--color-primary-dark); --color-heatmap-today-ring: var(--color-accent); /* Token architecture: - theme blocks below own base primitives - component tokens describe reusable UI patterns across screens - page aliases stay reserved for screen-specific compositions only */ /* Component tokens: secondary copy */ --color-component-secondary-copy: color-mix(in srgb, var(--color-text-secondary) 58%, var(--color-text-main) 42%); --color-component-secondary-copy-strong: color-mix(in srgb, var(--color-text-secondary) 54%, var(--color-text-main) 46%); /* Component tokens: elevated cards/surfaces */ --color-component-card-elevated-bg-start: color-mix(in srgb, var(--color-surface-1) 90%, var(--color-primary-light) 10%); --color-component-card-elevated-bg-mid: color-mix(in srgb, var(--color-surface-1) 96%, var(--color-primary-light) 4%); --color-component-card-elevated-bg-end: color-mix(in srgb, var(--color-surface-1) 96%, var(--color-accent-light) 4%); --color-component-card-elevated-bg: linear-gradient(155deg, var(--color-component-card-elevated-bg-start) 0%, var(--color-component-card-elevated-bg-mid) 52%, var(--color-component-card-elevated-bg-end) 100%); --color-component-card-elevated-border: color-mix(in srgb, var(--color-border-strong) 44%, var(--color-primary-light) 56%); --color-component-card-elevated-border-hover: color-mix(in srgb, var(--color-primary) 56%, var(--color-border-strong) 44%); /* Component tokens: muted buttons and icon actions */ --color-component-button-muted-bg: color-mix(in srgb, var(--color-surface-1) 84%, var(--color-primary-light) 16%); --color-component-button-muted-border: color-mix(in srgb, var(--color-border-strong) 38%, var(--color-primary-light) 62%); --color-component-button-muted-fg: color-mix(in srgb, var(--color-text-secondary) 18%, var(--color-text-main) 82%); --color-component-button-muted-hover-bg: color-mix(in srgb, var(--color-surface-1) 68%, var(--color-primary-light) 32%); --color-component-button-muted-hover-border: color-mix(in srgb, var(--color-primary) 58%, var(--color-border-strong) 42%); --color-component-button-muted-hover-fg: var(--color-text-main); --color-component-button-muted-active-bg: color-mix(in srgb, var(--color-surface-1) 58%, var(--color-primary-light) 42%); --color-component-icon-button-muted-bg: color-mix(in srgb, var(--color-surface-1) 82%, var(--color-surface-2) 18%); --color-component-icon-button-muted-border: color-mix(in srgb, var(--color-border-strong) 24%, transparent); --color-component-icon-button-muted-fg: color-mix(in srgb, var(--color-text-secondary) 44%, var(--color-text-main) 56%); --color-component-icon-button-muted-hover-bg: color-mix(in srgb, var(--color-surface-1) 72%, var(--color-primary-light) 28%); --color-component-icon-button-muted-hover-border: color-mix(in srgb, var(--color-primary) 42%, var(--color-border-strong) 58%); --color-component-icon-button-muted-hover-fg: var(--color-text-main); /* Component tokens: segmented controls/tabs */ --color-component-segmented-bg: color-mix(in srgb, var(--color-surface-2) 82%, var(--color-surface-1) 18%); --color-component-segmented-border: color-mix(in srgb, var(--color-border-subtle) 64%, var(--color-border-strong) 36%); --color-component-segmented-button-fg: color-mix(in srgb, var(--color-text-secondary) 18%, var(--color-text-main) 82%); --color-component-segmented-button-hover-bg: color-mix(in srgb, var(--color-surface-1) 72%, transparent); --color-component-segmented-button-hover-fg: var(--color-text-main); --color-component-segmented-button-active-bg: var(--color-surface-1); --color-component-segmented-button-active-fg: var(--color-text-main); --color-component-segmented-button-active-border: color-mix(in srgb, var(--color-border-strong) 56%, var(--color-primary-light) 44%); --shadow-component-segmented: inset 0 1px 0 color-mix(in srgb, var(--color-surface-1) 18%, transparent); --shadow-component-segmented-button-active: 0 1px 2px rgba(15, 23, 42, 0.12), inset 0 1px 0 color-mix(in srgb, var(--color-surface-1) 28%, transparent); /* Component tokens: pills/badges */ --color-component-pill-neutral-bg: color-mix(in srgb, var(--color-surface-1) 58%, var(--color-primary-light) 42%); --color-component-pill-neutral-fg: color-mix(in srgb, var(--color-text-main) 62%, var(--color-primary) 38%); --color-component-pill-neutral-border: color-mix(in srgb, var(--color-border-strong) 34%, var(--color-primary-light) 66%); --color-component-pill-success-bg: color-mix(in srgb, var(--color-surface-1) 44%, var(--color-success-light) 56%); --color-component-pill-success-fg: color-mix(in srgb, var(--color-text-main) 54%, var(--color-success-darker) 46%); --color-component-pill-success-border: color-mix(in srgb, var(--color-border-strong) 26%, var(--color-success) 74%); --color-component-pill-warning-bg: color-mix(in srgb, var(--color-surface-1) 48%, var(--color-warning-light) 52%); --color-component-pill-warning-fg: color-mix(in srgb, var(--color-text-main) 56%, var(--color-warning-darker) 44%); --color-component-pill-warning-border: color-mix(in srgb, var(--color-border-strong) 28%, var(--color-warning) 72%); --color-component-pill-error-bg: color-mix(in srgb, var(--color-surface-1) 48%, var(--color-error-light) 52%); --color-component-pill-error-fg: color-mix(in srgb, var(--color-text-main) 52%, var(--color-error-darker) 48%); --color-component-pill-error-border: color-mix(in srgb, var(--color-border-strong) 28%, var(--color-error) 72%); --color-component-pill-info-bg: color-mix(in srgb, var(--color-surface-1) 50%, var(--color-info-light) 50%); --color-component-pill-info-fg: color-mix(in srgb, var(--color-text-main) 54%, var(--color-info-darker) 46%); --color-component-pill-info-border: color-mix(in srgb, var(--color-border-strong) 28%, var(--color-info) 72%); /* Component tokens: rows, alerts, empty states */ --color-component-panel-row-bg: color-mix(in srgb, var(--color-surface-2) 86%, var(--color-surface-1) 14%); --color-component-panel-row-border: color-mix(in srgb, var(--color-border-subtle) 62%, var(--color-border-strong) 38%); --color-component-panel-row-soft-bg: color-mix(in srgb, var(--color-surface-1) 90%, var(--color-bg-secondary)); --color-component-panel-row-soft-border: var(--color-border-subtle); --color-component-panel-row-chip-bg: color-mix(in srgb, var(--color-surface-1) 82%, var(--color-bg-secondary)); --color-component-panel-row-chip-fg: color-mix(in srgb, var(--color-text-secondary) 82%, var(--color-text-main)); --color-component-empty-state-bg: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-1) 92%, var(--color-primary-light) 8%) 0%, color-mix(in srgb, var(--color-surface-1) 96%, var(--color-accent-light) 4%) 100%); --color-component-empty-state-border: color-mix(in srgb, var(--color-border-strong) 34%, var(--color-primary-light) 66%); --color-component-empty-state-icon-bg: color-mix(in srgb, var(--color-primary-light) 18%, var(--color-surface-1) 82%); --color-component-empty-state-icon-fg: color-mix(in srgb, var(--color-primary) 48%, var(--color-text-main) 52%); --color-component-empty-state-copy: var(--color-component-secondary-copy); --color-component-icon-tint-bg: color-mix(in srgb, var(--color-primary-light) 52%, var(--color-surface-1)); --color-component-icon-tint-ring: color-mix(in srgb, var(--color-primary-light) 70%, transparent); --color-component-tooltip-button-bg: color-mix(in srgb, var(--color-surface-1) 70%, var(--color-bg-secondary)); --color-component-tooltip-button-fg: color-mix(in srgb, var(--color-text-main) 78%, var(--color-text-secondary)); --color-component-tooltip-button-hover-bg: color-mix(in srgb, var(--color-primary-light) 44%, var(--color-surface-1)); --color-component-tooltip-button-hover-border: rgba(71, 85, 105, 0.28); --color-component-tooltip-button-hover-fg: var(--color-text-main); /* Component tokens: heatmap/calendar cells */ --color-component-heatmap-cell-border: color-mix(in srgb, var(--color-border-strong) 28%, transparent); --color-component-heatmap-low-outline: color-mix(in srgb, var(--color-heatmap-low) 44%, var(--color-surface-1)); --color-component-heatmap-mid-outline: color-mix(in srgb, var(--color-heatmap-mid) 52%, var(--color-surface-1)); --color-component-heatmap-high-outline: color-mix(in srgb, var(--color-heatmap-high) 62%, var(--color-surface-1)); --color-component-heatmap-peak: color-mix(in srgb, var(--color-heatmap-high) 72%, var(--color-accent)); --color-component-heatmap-peak-outline: color-mix(in srgb, var(--color-accent) 68%, transparent); --color-component-heatmap-today-inline-ring: color-mix(in srgb, var(--color-surface-1) 40%, transparent); --color-component-heatmap-swatch-border: color-mix(in srgb, var(--color-border-subtle) 65%, transparent); --color-component-heatmap-legend-copy: var(--color-component-secondary-copy); /* Page aliases: Main screen only */ --color-main-secondary-copy: var(--color-component-secondary-copy); --color-main-secondary-copy-strong: var(--color-component-secondary-copy-strong); --color-main-hero-title: var(--color-text-on-dark); --color-main-hero-description: color-mix(in srgb, var(--color-text-on-dark) 74%, var(--color-primary-light) 26%); --color-main-hero-eyebrow-bg: color-mix(in srgb, var(--color-text-on-dark) 10%, transparent); --color-main-hero-eyebrow-border: color-mix(in srgb, var(--color-text-on-dark) 18%, transparent); --color-main-hero-eyebrow-fg: color-mix(in srgb, var(--color-text-on-dark) 92%, var(--color-primary-light) 8%); --color-main-hero-action-bg: color-mix(in srgb, var(--color-text-on-dark) 16%, transparent); --color-main-hero-action-bg-hover: color-mix(in srgb, var(--color-text-on-dark) 24%, transparent); --color-main-hero-action-border: color-mix(in srgb, var(--color-text-on-dark) 24%, transparent); --color-main-hero-action-shadow: 0 8px 16px -4px color-mix(in srgb, var(--color-bg-ink) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-text-on-dark) 18%, transparent); --color-main-hero-support-bg: color-mix(in srgb, var(--color-info-light) 20%, var(--color-text-on-dark) 10%); --color-main-hero-support-border: color-mix(in srgb, var(--color-text-on-dark) 20%, transparent); --color-main-hero-support-fg: color-mix(in srgb, var(--color-text-on-dark) 84%, var(--color-info-light) 16%); --color-main-hero-primary-bg-start: color-mix(in srgb, var(--color-primary) 42%, var(--color-bg-ink) 58%); --color-main-hero-primary-bg-end: color-mix(in srgb, var(--color-bg-ink) 76%, var(--color-primary-dark) 24%); --color-main-hero-theory-bg-start: color-mix(in srgb, var(--color-info) 34%, var(--color-bg-ink) 66%); --color-main-hero-theory-bg-end: color-mix(in srgb, var(--color-bg-ink) 76%, var(--color-accent) 24%); --color-main-quick-access-heading-icon-bg: color-mix(in srgb, var(--color-primary-light) 18%, var(--color-surface-1) 82%); --color-main-quick-access-heading-icon-fg: color-mix(in srgb, var(--color-primary) 48%, var(--color-text-main) 52%); --color-main-quick-access-heading-icon-border: color-mix(in srgb, var(--color-primary-light) 54%, var(--color-border-strong) 46%); --color-main-quick-access-kicker: color-mix(in srgb, var(--color-primary) 72%, var(--color-text-main) 28%); --color-main-quick-access-count-bg: color-mix(in srgb, var(--color-surface-2) 86%, var(--color-primary-light) 14%); --color-main-quick-access-count-border: color-mix(in srgb, var(--color-border-strong) 42%, var(--color-primary-light) 58%); --color-main-quick-access-show-all-bg: var(--color-component-button-muted-bg); --color-main-quick-access-show-all-border: var(--color-component-button-muted-border); --color-main-quick-access-show-all-bg-hover: var(--color-component-button-muted-hover-bg); --color-main-quick-access-show-all-border-hover: var(--color-component-button-muted-hover-border); --color-main-quick-access-list-border: color-mix(in srgb, var(--color-border-strong) 42%, var(--color-primary-light) 58%); --color-main-quick-access-list-glow: color-mix(in srgb, var(--color-primary-light) 16%, transparent); --color-main-quick-access-list-bg-start: color-mix(in srgb, var(--color-surface-1) 94%, var(--color-primary-light) 6%); --color-main-quick-access-card-border: var(--color-component-card-elevated-border); --color-main-quick-access-card-border-hover: var(--color-component-card-elevated-border-hover); --color-main-quick-access-card-border-paused: color-mix(in srgb, var(--color-warning) 40%, var(--color-border-subtle) 60%); --color-main-quick-access-card-border-critical: color-mix(in srgb, var(--color-error) 34%, var(--color-border-subtle) 66%); --color-main-quick-access-card-border-mastered: color-mix(in srgb, var(--color-success) 28%, var(--color-border-subtle) 72%); --color-main-quick-access-card-bg-start: var(--color-component-card-elevated-bg-start); --color-main-quick-access-card-bg-mid: var(--color-component-card-elevated-bg-mid); --color-main-quick-access-card-bg-end: var(--color-component-card-elevated-bg-end); --color-main-quick-access-media-bg: linear-gradient(145deg, color-mix(in srgb, var(--color-primary-light) 58%, white 42%), color-mix(in srgb, var(--color-surface-1) 68%, var(--color-primary-light) 32%)); --color-main-quick-access-media-border: color-mix(in srgb, var(--color-primary-light) 70%, var(--color-border-subtle) 30%); --color-main-quick-access-pill-bg: var(--color-component-pill-neutral-bg); --color-main-quick-access-pill-fg: var(--color-component-pill-neutral-fg); --color-main-quick-access-pill-border: var(--color-component-pill-neutral-border); --color-main-quick-access-pill-paused-bg: var(--color-component-pill-warning-bg); --color-main-quick-access-pill-paused-fg: var(--color-component-pill-warning-fg); --color-main-quick-access-pill-paused-border: var(--color-component-pill-warning-border); --color-main-quick-access-pill-critical-bg: var(--color-component-pill-error-bg); --color-main-quick-access-pill-critical-fg: var(--color-component-pill-error-fg); --color-main-quick-access-pill-critical-border: var(--color-component-pill-error-border); --color-main-quick-access-pill-mastered-bg: var(--color-component-pill-success-bg); --color-main-quick-access-pill-mastered-fg: var(--color-component-pill-success-fg); --color-main-quick-access-pill-mastered-border: var(--color-component-pill-success-border); --color-main-quick-access-meta-bg: color-mix(in srgb, var(--color-surface-2) 74%, var(--color-surface-1) 26%); --color-main-quick-access-meta-fg: var(--color-component-secondary-copy); --color-main-quick-access-meta-border: color-mix(in srgb, var(--color-border-subtle) 58%, var(--color-border-strong) 42%); --color-main-quick-access-chip-meta: color-mix(in srgb, var(--color-text-secondary) 88%, var(--color-text-main)); --color-main-quick-access-description: color-mix(in srgb, var(--color-text-secondary) 62%, var(--color-text-main) 38%); --color-main-quick-access-remove-bg: var(--color-component-icon-button-muted-bg); --color-main-quick-access-remove-border: var(--color-component-icon-button-muted-border); --color-main-quick-access-remove-fg: var(--color-component-icon-button-muted-fg); --color-main-quick-access-remove-hover-bg: color-mix(in srgb, var(--color-error-lighter) 78%, white 22%); --color-main-quick-access-progress-label: var(--color-component-secondary-copy); --color-main-quick-access-progress-track: color-mix(in srgb, var(--color-surface-2) 84%, var(--color-surface-1) 16%); --color-main-quick-access-progress-track-border: color-mix(in srgb, var(--color-border-subtle) 28%, transparent); --color-main-quick-access-progress-fill: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-accent) 72%, var(--color-primary) 28%)); --color-main-quick-access-progress-fill-paused: linear-gradient(90deg, var(--color-warning), color-mix(in srgb, var(--color-accent) 78%, var(--color-warning) 22%)); --color-main-quick-access-progress-fill-critical: linear-gradient(90deg, var(--color-error), color-mix(in srgb, var(--color-warning) 42%, var(--color-error) 58%)); --color-main-quick-access-action-bg: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 86%, black 14%), var(--color-primary)); --color-main-quick-access-nav-border: color-mix(in srgb, var(--color-border-subtle) 72%, var(--color-primary-light) 28%); --color-main-quick-access-nav-bg: color-mix(in srgb, var(--color-surface-1) 90%, var(--color-primary-light) 10%); --color-main-quick-access-nav-border-hover: var(--color-primary-light); --color-main-quick-access-nav-bg-hover: color-mix(in srgb, var(--color-surface-1) 76%, var(--color-primary-light) 24%); --color-main-period-toggle-bg: var(--color-component-segmented-bg); --color-main-period-toggle-border: var(--color-component-segmented-border); --color-main-period-toggle-button-fg: var(--color-component-segmented-button-fg); --color-main-period-toggle-button-hover-bg: var(--color-component-segmented-button-hover-bg); --color-main-period-toggle-button-hover-fg: var(--color-component-segmented-button-hover-fg); --color-main-period-toggle-button-active-bg: var(--color-component-segmented-button-active-bg); --color-main-period-toggle-button-active-fg: var(--color-component-segmented-button-active-fg); --color-main-period-toggle-button-active-border: var(--color-component-segmented-button-active-border); --color-main-health-row-bg: var(--color-component-panel-row-bg); --color-main-health-row-border: var(--color-component-panel-row-border); --color-main-primary-cta-bg: color-mix(in srgb, var(--color-primary), var(--color-surface-1) 70%); --color-main-primary-cta-border: color-mix(in srgb, var(--color-primary), var(--color-surface-1) 45%); --color-main-secondary-cta-bg: color-mix(in srgb, var(--color-accent), var(--color-surface-1) 70%); --color-main-secondary-cta-border: color-mix(in srgb, var(--color-accent), var(--color-surface-1) 45%); --color-main-heatmap-cell-border: var(--color-component-heatmap-cell-border); --color-main-heatmap-low-outline: var(--color-component-heatmap-low-outline); --color-main-heatmap-mid-outline: var(--color-component-heatmap-mid-outline); --color-main-heatmap-high-outline: var(--color-component-heatmap-high-outline); --color-main-heatmap-peak: var(--color-component-heatmap-peak); --color-main-heatmap-peak-outline: var(--color-component-heatmap-peak-outline); --color-main-heatmap-today-inline-ring: var(--color-component-heatmap-today-inline-ring); --color-main-heatmap-legend-swatch-border: var(--color-component-heatmap-swatch-border); --color-main-heatmap-legend-copy: var(--color-component-heatmap-legend-copy); --color-main-heatmap-legend-item: var(--color-component-heatmap-legend-copy); --color-main-stats-label: var(--color-component-secondary-copy-strong); --color-main-stats-link: color-mix(in srgb, var(--color-primary) 56%, var(--color-text-main) 44%); --color-main-stats-heading-icon: color-mix(in srgb, var(--color-accent) 42%, var(--color-text-main) 58%); /* Page aliases: Complex Builder */ --color-page-builder-surface: var(--color-component-panel-row-soft-bg); --color-page-builder-surface-strong: var(--color-component-panel-row-bg); --color-page-builder-border: var(--color-component-panel-row-border); --color-page-builder-border-strong: var(--color-component-card-elevated-border-hover); --color-page-builder-primary-bg: var(--color-component-pill-info-bg); --color-page-builder-primary-bg-strong: var(--color-component-empty-state-icon-bg); --color-page-builder-primary-border: var(--color-component-pill-info-border); --color-page-builder-success-bg: var(--color-component-pill-success-bg); --color-page-builder-success-bg-strong: var(--color-component-pill-success-bg); --color-page-builder-success-border: var(--color-component-pill-success-border); --color-page-builder-warning-bg: var(--color-component-pill-warning-bg); --color-page-builder-warning-bg-strong: var(--color-component-pill-warning-bg); --color-page-builder-warning-border: var(--color-component-pill-warning-border); --color-page-builder-error-bg: var(--color-component-pill-error-bg); --color-page-builder-error-bg-strong: var(--color-component-pill-error-bg); --color-page-builder-error-border: var(--color-component-pill-error-border); --color-page-builder-shadow-soft: var(--shadow-sm); --color-page-builder-shadow-strong: var(--shadow-md); --color-page-builder-shadow-modal: var(--shadow-lg); --color-page-builder-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12); --color-page-builder-modal-scrim: rgba(15, 23, 42, 0.56); --color-page-builder-modal-scrim-dark: rgba(0, 0, 0, 0.72); --color-page-builder-field-inset-shadow: inset 0 1px 2px color-mix(in srgb, var(--color-text-main) 3%, transparent); --color-page-builder-field-focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent); --color-page-builder-task-checkbox-inset-shadow: inset 0 1px 2px color-mix(in srgb, var(--color-text-main) 5%, transparent); --color-page-builder-task-checkbox-checked-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 30%, transparent), inset 0 1px 2px color-mix(in srgb, var(--color-text-main) 10%, transparent); --color-page-builder-section-header-shadow: 0 1px 3px color-mix(in srgb, var(--color-text-main) 5%, transparent); --color-page-builder-section-header-shadow-hover: 0 4px 12px color-mix(in srgb, var(--color-text-main) 8%, transparent); --color-page-builder-add-button-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 2px 4px color-mix(in srgb, var(--color-primary) 20%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2); --color-page-builder-add-button-shadow-hover: 0 8px 20px color-mix(in srgb, var(--color-primary) 40%, transparent), 0 4px 8px color-mix(in srgb, var(--color-primary) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2); --color-page-builder-add-button-shadow-active: 0 2px 8px color-mix(in srgb, var(--color-primary) 25%, transparent), inset 0 1px 3px rgba(0, 0, 0, 0.15); --color-page-builder-add-button-compact-shadow: 0 2px 4px color-mix(in srgb, var(--color-primary) 30%, transparent); --color-page-builder-add-button-compact-shadow-hover: 0 4px 12px color-mix(in srgb, var(--color-primary) 40%, transparent); --color-page-builder-primary-button-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 2px 4px color-mix(in srgb, var(--color-text-main) 10%, transparent); --color-page-builder-primary-button-shadow-hover: 0 6px 20px color-mix(in srgb, var(--color-primary) 40%, transparent), 0 4px 8px color-mix(in srgb, var(--color-text-main) 15%, transparent); --color-page-builder-danger-border-soft: color-mix(in srgb, var(--color-status-error) 80%, transparent); --color-page-builder-danger-hover-bg: color-mix(in srgb, var(--color-status-error) 5%, transparent); --color-page-builder-sidebar-rail-shadow: -4px 0 16px color-mix(in srgb, var(--color-text-main) 12%, transparent); --color-page-builder-sidebar-panel-border: color-mix(in srgb, var(--color-border-normal) 60%, transparent); --color-page-builder-module-card-shadow: 0 1px 4px color-mix(in srgb, var(--color-text-main) 8%, transparent); --color-page-builder-module-card-hover-bg: color-mix(in srgb, var(--color-primary) 8%, transparent); --color-page-builder-module-icon-bg: color-mix(in srgb, var(--color-primary) 20%, transparent); --color-page-builder-task-chip-selected-shadow: 0 2px 6px color-mix(in srgb, var(--color-primary) 25%, transparent); --color-page-builder-card-section-shadow: 0 2px 8px color-mix(in srgb, var(--color-text-main) 4%, transparent); --color-page-builder-card-section-shadow-hover: 0 8px 24px color-mix(in srgb, var(--color-text-main) 8%, transparent); --color-page-builder-task-card-shadow: 0 1px 1px color-mix(in srgb, var(--color-text-main) var(--sidebar-shadow-opacity, 4%), transparent); --color-page-builder-task-card-hover-shadow: 0 2px 8px color-mix(in srgb, var(--color-text-main) 5%, transparent), 0 1px 3px color-mix(in srgb, var(--color-primary) 10%, transparent); --color-page-builder-task-card-selected-bg: color-mix(in srgb, var(--color-primary) 6%, transparent); --color-page-builder-custom-checkbox-inset-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text-main) 5%, transparent); --color-page-builder-custom-checkbox-hover-bg: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-1)); --color-page-builder-custom-checkbox-selected-shadow: 0 8px 16px -16px color-mix(in srgb, var(--color-primary) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-text-main) 8%, transparent); --color-page-builder-task-tag-flat-primary-bg: color-mix(in srgb, var(--color-primary) 12%, transparent); --color-page-builder-task-tag-flat-primary-border: color-mix(in srgb, var(--color-primary) 28%, transparent); --color-page-builder-task-tag-flat-success-bg: color-mix(in srgb, var(--color-success) 16%, transparent); --color-page-builder-task-tag-flat-success-border: color-mix(in srgb, var(--color-success) 32%, transparent); --color-page-builder-task-tag-flat-chain-1-bg: color-mix(in srgb, var(--color-chain-1) 12%, transparent); --color-page-builder-task-tag-flat-chain-1-border: color-mix(in srgb, var(--color-chain-1) 28%, transparent); --color-page-builder-task-tag-flat-chain-2-bg: color-mix(in srgb, var(--color-chain-2) 12%, transparent); --color-page-builder-task-tag-flat-chain-2-border: color-mix(in srgb, var(--color-chain-2) 28%, transparent); --color-page-builder-task-tag-flat-chain-3-bg: color-mix(in srgb, var(--color-chain-3) 12%, transparent); --color-page-builder-task-tag-flat-chain-3-border: color-mix(in srgb, var(--color-chain-3) 28%, transparent); --color-page-builder-task-tag-flat-chain-4-bg: color-mix(in srgb, var(--color-chain-4) 12%, transparent); --color-page-builder-task-tag-flat-chain-4-border: color-mix(in srgb, var(--color-chain-4) 28%, transparent); --color-page-builder-task-tag-flat-hover-bg: color-mix(in srgb, var(--color-primary) 15%, transparent); --color-page-builder-task-tag-flat-hover-shadow: 0 2px 8px color-mix(in srgb, var(--color-text-main) 10%, transparent); --color-page-builder-task-tag-chain-1-bg: linear-gradient(180deg, color-mix(in srgb, var(--color-chain-1) 28%, var(--color-surface-1)), color-mix(in srgb, var(--color-chain-1) 18%, var(--color-surface-1))); --color-page-builder-task-tag-chain-1-border: color-mix(in srgb, var(--color-chain-1) 58%, var(--color-border-strong)); --color-page-builder-task-tag-chain-2-bg: linear-gradient(180deg, color-mix(in srgb, var(--color-chain-2) 28%, var(--color-surface-1)), color-mix(in srgb, var(--color-chain-2) 18%, var(--color-surface-1))); --color-page-builder-task-tag-chain-2-border: color-mix(in srgb, var(--color-chain-2) 58%, var(--color-border-strong)); --color-page-builder-task-tag-chain-3-bg: linear-gradient(180deg, color-mix(in srgb, var(--color-chain-3) 28%, var(--color-surface-1)), color-mix(in srgb, var(--color-chain-3) 18%, var(--color-surface-1))); --color-page-builder-task-tag-chain-3-border: color-mix(in srgb, var(--color-chain-3) 58%, var(--color-border-strong)); --color-page-builder-task-tag-chain-4-bg: linear-gradient(180deg, color-mix(in srgb, var(--color-chain-4) 28%, var(--color-surface-1)), color-mix(in srgb, var(--color-chain-4) 18%, var(--color-surface-1))); --color-page-builder-task-tag-chain-4-border: color-mix(in srgb, var(--color-chain-4) 58%, var(--color-border-strong)); } /* ============================================================================ LIGHT A THEME - Indigo/Platinum (v2.0) ========================================================================== */ :root[data-theme="light-a"], [data-theme="light-a"] { /* ========== PRIMARY COLOR SYSTEM ========== */ --color-primary: #27187E; /* Indigo Ink - New Primary */ --color-primary-light: #758BFD; --color-primary-lighter: #AEB8FE; --color-primary-dark: #1A1054; --color-primary-darker: #0E0830; --color-primary-hover: #1A1054; --color-primary-active: #0E0830; --color-primary-fg: #FFFFFF; --color-primary-contrast: var(--color-primary-fg); /* ========== SECONDARY COLOR SYSTEM (Slate / Platinum) ========== */ --color-secondary: #64748B; /* Slate 500 */ --color-secondary-light: #F1F5F9; /* Slate 100 */ --color-secondary-lighter: #F8FAFC; /* Slate 50 */ --color-secondary-dark: #334155; /* Slate 700 */ --color-secondary-darker: #0F172A; /* Slate 900 */ --color-secondary-hover: #475569; /* Slate 600 */ /* ========== ACCENT COLOR SYSTEM (Orange) ========== */ --color-accent: #EA580C; --color-accent-light: #FFEDD5; --color-accent-lighter: #FFF7ED; --color-accent-dark: #C2410C; --color-accent-darker: #7C2D12; /* ========== STATE COLORS (Standard) ========== */ --color-success: #047857; --color-success-light: #D1FAE5; --color-success-lighter: #ECFDF5; --color-success-dark: #047857; --color-success-darker: #064E3B; --color-success-text: #064E3B; --color-status-error: #B91C1C; --color-error: #B91C1C; --color-error-light: #FEE2E2; --color-error-lighter: #FEF2F2; --color-error-dark: #B91C1C; --color-error-darker: #7F1D1D; --color-error-text: #7F1D1D; --color-warning: #F59E0B; --color-warning-light: #FEF3C7; --color-warning-lighter: #FFFBEB; --color-warning-dark: #B45309; --color-warning-darker: #78350F; --color-warning-text: #78350F; /* ========== INFO STATE (Indigo) ========== */ --color-info: #4F46E5; --color-info-light: #E0E7FF; --color-info-lighter: #EEF2FF; --color-info-dark: #3730A3; --color-info-darker: #312E81; --color-info-text: #312E81; /* ========== BACKGROUND & SURFACE ========== */ --color-bg-main: #EBEDF2; --color-bg-secondary: #E8E9ED; --color-bg-tertiary: #CBD5E1; --color-bg-hover: #E2E8F0; --color-bg-disabled: #94A3B8; --color-surface-0: #EBEDF2; --color-surface-1: #FFFFFF; /* Changed to White for better contrast */ --color-surface-2: #CACFD8; --color-surface-panel: var(--color-surface-2); --color-surface-chip: var(--color-surface-2); --color-text-chip: var(--color-text-secondary); /* ========== TEXT COLORS ========== */ --color-text-main: #0F172A; /* Slate 900 */ --color-text-secondary: #475569; /* Slate 600 */ --color-text-muted: #475569; /* FIXED: WCAG 4.5:1 Contrast against #E8E9ED */ --color-text-disabled: #94A3B8; --color-text-contrast: #FFFFFF; /* ========== BORDER COLORS ========== */ --color-border: #CBD5E1; /* Slate 300 */ --color-border-subtle: #64748B; --color-border-normal: var(--color-border); /* Slate 500 - HIGH CONTRAST for Auditor (3:1) */ --color-border-strong: #475569; /* Slate 600 */ /* ========== SHADOW SYSTEM ========== */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.1); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1); --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1); /* ========== TRANSITION SYSTEM ========== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* ========== DYNAMIC CHAIN PALETTE ========== */ --color-chain-1: #4d7a43; --color-chain-2: #4a7ab5; --color-chain-3: #b48605; --color-chain-4: #8a6bbd; /* ========== GLASS EFFECTS ========== */ --sidebar-shadow-opacity: 0.12; --sidebar-rim-opacity: 0.1; /* ========== HEATMAP (Mini Calendar) ========== */ --color-heatmap-empty: #b0b6bf; --color-heatmap-low: #958ec0; --color-heatmap-mid: #8880b8; --color-heatmap-high: #7970af; } /* ============================================================================ LIGHT B THEME - Warm Paper & Spiced Orange ========================================================================== */ :root[data-theme="light-b"], [data-theme="light-b"] { /* ========== PRIMARY COLOR SYSTEM ========== */ --color-primary: #9C4215; --color-primary-light: #E8D4C5; --color-primary-lighter: #E2D4C8; --color-primary-dark: #9C4215; --color-primary-darker: #261614; --color-primary-hover: #704F2D; --color-primary-active: #704F2D; --color-primary-fg: #FFFFFF; --color-primary-contrast: var(--color-primary-fg); /* ========== SECONDARY COLOR SYSTEM ========== */ --color-secondary: #8D7B6F; --color-secondary-light: #C4B5AA; --color-secondary-lighter: #DCC9B6; --color-secondary-dark: #6B5F54; --color-secondary-darker: #261614; --color-secondary-hover: #4A3B2A; /* ========== ACCENT COLOR SYSTEM ========== */ --color-accent: #D97706; --color-accent-light: #FFEDD5; --color-accent-lighter: #FFF7ED; --color-accent-dark: #C2410C; --color-accent-darker: #7C2D12; /* ========== STATE COLORS ========== */ --color-success: #15803D; --color-success-light: #D1F3EB; --color-success-lighter: #ECFDF5; --color-success-dark: #107D65; --color-success-darker: #064E3B; --color-success-text: #064E3B; --color-error: #A24519; --color-error-light: #F5E8E0; --color-error-lighter: #FEF2F2; --color-error-dark: #704F2D; --color-error-darker: #7F1D1D; --color-error-text: #7F1D1D; --color-status-error: #A24519; --color-warning: #C2410C; --color-warning-light: #FEF3C7; --color-warning-lighter: #FFFBEB; --color-warning-dark: #7C4407; --color-warning-darker: #78350F; --color-warning-text: #78350F; --color-info: #3B82F6; --color-info-light: #DBEAFE; --color-info-lighter: #EEF2FF; --color-info-dark: #1E40AF; --color-info-darker: #312E81; --color-info-text: #312E81; /* ========== BACKGROUND & SURFACE ========== */ --color-bg-main: #FAF7EF; --color-bg-secondary: #F2EFE9; --color-bg-tertiary: #E6E0D4; --color-bg-hover: #E2E8F0; --color-bg-disabled: #94A3B8; --color-surface-0: #EBEDF2; --color-surface-1: #FFFFFF; --color-surface-2: #E6D3C8; --color-surface-panel: var(--color-surface-2); --color-surface-chip: var(--color-surface-2); --color-text-chip: var(--color-text-secondary); /* ========== TEXT COLORS ========== */ --color-text-main: #2D241E; --color-text-secondary: #6B5F54; --color-text-muted: #6B5F54; --color-text-disabled: #AFA399; --color-text-contrast: #FFFFFF; /* ========== BORDER COLORS ========== */ --color-border: #E6E0D4; --color-border-subtle: #8D7B6F; --color-border-normal: var(--color-border); --color-border-strong: #C05621; /* ========== SHADOW SYSTEM ========== */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.1); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1); --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1); /* ========== TRANSITION SYSTEM ========== */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* ========== DYNAMIC CHAIN PALETTE ========== */ --color-chain-1: #4d7a43; --color-chain-2: #4a7ab5; --color-chain-3: #b48605; --color-chain-4: #8a6bbd; /* ========== GLASS EFFECTS ========== */ --sidebar-shadow-opacity: 0.12; --sidebar-rim-opacity: 0.1; /* ========== HEATMAP (Mini Calendar) ========== */ --color-heatmap-empty: #e0ac92; --color-heatmap-low: #c08669; --color-heatmap-mid: #b87757; --color-heatmap-high: #ae643f; } /* ============================================================================ NEUTRAL A THEME - Refined Earth ========================================================================== */ :root[data-theme="neutral-a"], [data-theme="neutral-a"] { /* ========== PRIMARY COLOR SYSTEM (Earth Grey - Deep Brown) ========== */ --color-primary: #5D4037; /* Base: Earth Grey */ --color-primary-light: #BFAEA8; /* Lightened */ --color-primary-lighter: #E2D4C8; /* Lighter */ --color-primary-dark: #3E2723; /* Dark Roast */ --color-primary-darker: #261614; /* Almost Black */ --color-primary-hover: #3E2723; /* Hover action */ --color-primary-active: #261614; /* Active action */ --color-primary-fg: #EAE0D5; /* Text on Primary */ --color-primary-contrast: var(--color-primary-fg); /* ========== SECONDARY COLOR SYSTEM (Camel / Pale Oak) ========== */ --color-secondary: #5D4037; /* Darker Camel (was #A39171) for icon contrast */ --color-secondary-light: #BFB0A0; --color-secondary-lighter: #DCC9B6; --color-secondary-dark: #3E2723; /* Dark Roast */ --color-secondary-darker: #261614; --color-secondary-hover: #4A3B2A; --color-secondary-text: #261614; /* ========== ACCENT COLOR SYSTEM ========== */ --color-accent: #5D4037; --color-accent-light: #EBE5DD; --color-accent-lighter: #DCC9B6; --color-accent-dark: #4A3B2A; --color-accent-darker: #271815; /* ========== STATE COLORS (Earthy Tones) ========== */ /* SUCCESS: Moss Green */ --color-success: #2E4B2E; /* Darkened from #4E7A4E */ --color-success-light: #D4E0D4; --color-success-lighter: #E6F0EB; --color-success-dark: #1F2E27; --color-success-darker: #141E19; --color-success-text: #1F2E27; /* ERROR: Terra Cotta */ --color-error: #803A27; /* Darkened from #E07A5F */ --color-error-light: #EFBCAD; --color-error-lighter: #F9E4DE; --color-error-dark: #5A2525; --color-error-darker: #401D14; --color-error-text: #401D14; /* WARNING: Dark Mustard */ --color-warning: #78350F; /* Darkened from #745C1E */ --color-warning-light: #F2E8C9; --color-warning-lighter: #FFFBEB; --color-warning-dark: #451a03; --color-warning-darker: #3E2723; --color-warning-text: #3E2723; /* INFO: Muted Blue/Slate */ --color-info: #36424A; /* Darkened from #5A6E7C */ --color-info-light: #D4DBE0; --color-info-lighter: #E2E4EB; --color-info-dark: #14151F; --color-info-darker: #0D0F16; --color-info-text: #14151F; /* ========== BACKGROUND & SURFACE (Refined Earth) ========== */ --color-bg-main: #F2EBE5; /* Very Light Almond - Warm but light enough for contrast */ --color-bg-secondary: #CEBAA5; /* Deeper Almond - Darkened for >1.3 contrast against main */ --color-bg-tertiary: #C9B8A8; --color-bg-hover: #C9B8A8; --color-bg-disabled: #B5A390; --color-surface-0: #F2EBE5; --color-surface-1: #F2EBE5; /* Matches Main BG - creates "cutout" or "highlight" effect on cards */ --color-surface-2: #D6C4B1; --color-surface-panel: var(--color-surface-2); --color-surface-chip: #B5A390; --color-text-chip: var(--color-text-main); /* Lightened to match Main BG range for max contrast against cards */ /* ========== TEXT COLORS (High Contrast) ========== */ --color-text-main: #261614; --color-text-secondary: #261614; /* Darkened from #3E2723 to Ensure 4.5+ */ --color-text-muted: #5D4037; /* Contrast verified */ --color-text-disabled: #5D4037; --color-text-contrast: #F4F1EE; /* ========== BORDER COLORS ========== */ /* Borders */ --color-border: #8C735A; /* Earth Grey Light */ --color-border-subtle: #5D4037; /* Darker Camel - Contrast 3.5:1 against Bg */ --color-border-normal: #8C735A; /* Camel */ --color-border-strong: #3E2723; /* Dark Roast */ /* ========== SHADOW SYSTEM (Clay Tinted) ========== */ --shadow-xs: 0 1px 2px rgba(62, 39, 35, 0.05); --shadow-sm: 0 2px 4px rgba(62, 39, 35, 0.08); --shadow-md: 0 4px 12px rgba(62, 39, 35, 0.1); --shadow-lg: 0 12px 24px rgba(62, 39, 35, 0.12); --shadow-xl: 0 20px 40px rgba(62, 39, 35, 0.15); /* ========== TRANSITION SYSTEM ========== */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* ========== DYNAMIC CHAIN PALETTE (Earth Tones) ========== */ --color-chain-1: #4d7a43; --color-chain-2: #4a7ab5; --color-chain-3: #b48605; --color-chain-4: #8a6bbd; /* ========== GLASS EFFECTS ========== */ --sidebar-shadow-opacity: 0.12; --sidebar-rim-opacity: 0.1; /* ========== HEATMAP (Mini Calendar) ========== */ --color-heatmap-empty: #b3a6a1; --color-heatmap-low: #97837b; --color-heatmap-mid: #8b756d; --color-heatmap-high: #7f675f; } /* ============================================================================ NEUTRAL B THEME - Amethyst Dusk ========================================================================== */ :root[data-theme="neutral-b"], [data-theme="neutral-b"] { /* ========== PRIMARY COLOR SYSTEM ========== */ --color-primary: #1f3a66; --color-primary-light: #E8D4C5; --color-primary-lighter: #E2D4C8; --color-primary-dark: #9C4215; --color-primary-darker: #261614; --color-primary-hover: #162645; --color-primary-active: #162645; --color-primary-fg: #dbe4f0; --color-primary-contrast: var(--color-primary-fg); /* ========== SECONDARY COLOR SYSTEM ========== */ --color-secondary: #808a9f; --color-secondary-light: #aab2c2; --color-secondary-lighter: #DCC9B6; --color-secondary-dark: #5e6678; --color-secondary-darker: #261614; --color-secondary-hover: #4A3B2A; /* ========== ACCENT COLOR SYSTEM ========== */ --color-accent: #50663c; --color-accent-light: #bad29f; --color-accent-lighter: #DCC9B6; --color-accent-dark: #4A3B2A; --color-accent-darker: #271815; /* ========== STATE COLORS ========== */ --color-success: #4d7a43; --color-success-light: #D1F3EB; --color-success-lighter: #E6F0EB; --color-success-dark: #107D65; --color-success-darker: #141E19; --color-success-text: #1F2E27; --color-error: #5A1919; --color-error-light: #F5E8E0; --color-error-lighter: #F9E4DE; --color-error-dark: #704F2D; --color-error-darker: #401D14; --color-error-text: #401D14; --color-status-error: #5A1919; --color-warning: #947105; --color-warning-light: #FEF3C7; --color-warning-lighter: #FFFBEB; --color-warning-dark: #7C4407; --color-warning-darker: #3E2723; --color-warning-text: #3E2723; --color-info: #0284c7; --color-info-light: #DBEAFE; --color-info-lighter: #E2E4EB; --color-info-dark: #1E40AF; --color-info-darker: #0D0F16; --color-info-text: #14151F; /* ========== BACKGROUND & SURFACE ========== */ --color-bg-main: #b0aac0; --color-bg-secondary: #e2dce8; --color-bg-tertiary: #a8a0b8; --color-bg-hover: #C9B8A8; --color-bg-disabled: #B5A390; --color-surface-0: #e8e4ee; --color-surface-1: #e2dbe7; --color-surface-2: #fdfcff; --color-surface-panel: var(--color-surface-2); --color-surface-chip: #5a7350; --color-text-chip: #ffffff; /* ========== TEXT COLORS ========== */ --color-text-main: #1a1226; --color-text-secondary: #261a38; --color-text-muted: #1d232f; --color-text-disabled: #808a9f; --color-text-contrast: #dbe4f0; /* ========== BORDER COLORS ========== */ --color-border: #E6E0D4; --color-border-subtle: #808a9f; --color-border-normal: var(--color-border-subtle); --color-border-strong: #3d2b56; /* ========== SHADOW SYSTEM ========== */ --shadow-xs: 0 1px 2px rgba(62, 39, 35, 0.05); --shadow-sm: 0 2px 4px rgba(62, 39, 35, 0.08); --shadow-md: 0 4px 12px rgba(62, 39, 35, 0.1); --shadow-lg: 0 12px 24px rgba(62, 39, 35, 0.12); --shadow-xl: 0 20px 40px rgba(62, 39, 35, 0.15); /* ========== TRANSITION SYSTEM ========== */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* ========== DYNAMIC CHAIN PALETTE ========== */ --color-chain-1: #4d7a43; --color-chain-2: #4a7ab5; --color-chain-3: #b48605; --color-chain-4: #8a6bbd; /* ========== GLASS EFFECTS ========== */ --sidebar-shadow-opacity: 0.12; --sidebar-rim-opacity: 0.1; /* ========== HEATMAP (Mini Calendar) ========== */ --color-heatmap-empty: #a398b0; --color-heatmap-low: #717e9c; --color-heatmap-mid: #617192; --color-heatmap-high: #506286; } html.dark, :root[data-theme="dark-a"], :root[data-theme="dark-b"], [data-theme="dark-a"], [data-theme="dark-b"] { color-scheme: dark; } /* ============================================================================ DARK A THEME - Almond / Pitch Black ========================================================================== */ :root[data-theme="dark-a"], [data-theme="dark-a"] { /* ========== PRIMARY COLOR SYSTEM (Warm Cinnamon/Khaki) ========== */ /* Base: Toasted Almond/Cinnamon Wood mix for richness */ --color-primary: #e8985e; --color-primary-light: #f0b58e; --color-primary-lighter: #3D2E1A; /* FIXED: Was #fce4d6 (light pastel) — wrong for dark theme. Now dark warm tint for bg highlights */ --color-primary-dark: #cc7a3d; --color-primary-darker: #a9714b; --color-primary-hover: #d68b55; /* Contrast: Pitch Black text on Orange primary is high contrast */ --color-primary-fg: #141204; --color-primary-contrast: var(--color-primary-fg); --color-status-error: var(--color-error); /* ========== SECONDARY COLOR SYSTEM (Olive/Khaki) ========== */ --color-secondary: #3E3220; /* Dark Khaki/Brown for Text/Icons */ --color-secondary-light: #2A2418; /* FIXED: Was #D4C4A8 (L=74.5%) — too light for dark theme */ --color-secondary-lighter: #211D14; /* FIXED: Was #EAE0D5 (L=87.6%) — too light for dark theme */ --color-secondary-dark: #262115; /* Changed from #1f1d0a for better badge-to-card contrast */ --color-secondary-darker: #141204; --color-secondary-hover: #54442b; /* ========== ACCENT COLOR SYSTEM ========== */ --color-accent: #a9714b; --color-accent-light: #2E2218; /* FIXED: Was #DCC9B6 (L=78.8%) — too light for dark theme */ --color-accent-lighter: #3A2A1E; /* FIXED: Was #deab8b (L=70.8%) — too light for dark theme */ --color-accent-dark: #3E2723; /* Darkened from #8c5d3d for better text contrast (>7:1) */ --color-accent-darker: #271815; /* ========== BACKGROUND & SURFACE (Pitch Black -> Khaki) ========== */ /* Strategy: - Main BG: Dark Khaki (#1a1810) - slightly lighter than pure black for comfort - Secondary BG (Cards/Panels): Dark Khaki (#262A10) - subtle separation - Tertiary BG: Dark Khaki 2 (#54442B) - highlighted areas */ --color-bg-main: #1a1810; /* Lightened from #141204 to reduce excessive contrast */ --color-bg-secondary: #363324; /* Lightened from #2D2B1E for >1.3 contrast against bg-main */ --color-bg-tertiary: #4F4A35; --color-bg-hover: #2E3315; --color-bg-disabled: rgba(38, 42, 16, 0.4); --color-surface-0: #1a1810; /* Lightened from #141204 */ --color-surface-1: #363324; /* Matched to bg-secondary for cards */ --color-surface-2: #4C4532; --color-surface-panel: var(--color-surface-2); --color-surface-chip: var(--color-surface-2); --color-text-chip: var(--color-text-secondary); /* Lightened from #383525 for elevated contrast */ /* ========== TEXT COLORS (Improved Readability) ========== */ /* Optimized for comfort: Reduced excessive contrast from 17.5:1 to ~12:1 Softer colors reduce eye strain during extended use */ --color-text-main: #E8DDD0; /* Softened from #FCEFE3 - reduces halation effect, contrast ~12:1 */ --color-text-secondary: #F0D5B5; /* Lightened from #E0B588 (>6:1) to exceed 4.5:1 against new lighter surfaces */ --color-text-muted: #D4C4A8; /* Lightened to match secondary-light for better contrast */ --color-text-disabled: #5a4a32; /* Lightened from #54442b for visibility */ --color-text-contrast: #1a1810; /* Text on light backgrounds - updated to match new bg-main */ /* ========== BORDER COLORS ========== */ --color-border-subtle: #a9714b; /* Cinnamon - Passes 3:1 against #1F1E10 */ --color-border: #a9714b; --color-border-normal: #a9714b; --color-border-strong: #d4a574; /* ========== STATE COLORS (Semantic) ========== */ /* SUCCESS: Sage/Olive Green */ --color-success: #69f0ae; --color-success-light: #1A2E1A; /* FIXED: Was #C4DFC4 (L=82.2%) — light pastel, wrong for dark theme */ --color-success-lighter: #12201A; /* FIXED: Was #E6F2E6 (L=92.5%) — light pastel, wrong for dark theme */ --color-success-dark: #557F55; --color-success-darker: #3B593B; --color-success-text: #141204; /* ERROR: Terra Cotta / Rust */ --color-error: #D66853; --color-error-light: #2E1610; /* FIXED: Was #F2Ccc6 (L=86.3%) — light pastel, wrong for dark theme */ --color-error-lighter: #201210; /* FIXED: Was #FAEfec (L=95.3%) — light pastel, wrong for dark theme */ --color-error-dark: #C85A42; --color-error-darker: #803020; --color-error-text: #FAEfec; /* WARNING: Mustard/Gold */ --color-warning: #D4AF37; --color-warning-light: #2A2210; /* FIXED: Was #F0DE99 (L=77.1%) — light pastel, wrong for dark theme */ --color-warning-lighter: #1E1A0D; /* FIXED: Was #FAF5DB (L=92.0%) — light pastel, wrong for dark theme */ --color-warning-dark: #AA8C2C; --color-warning-darker: #806921; --color-warning-text: #141204; /* INFO: Muted Slate/Teal */ --color-info: #6A8D92; --color-info-light: #152528; /* FIXED: Was #B4D1D4 (L=76.9%) — light pastel, wrong for dark theme */ --color-info-lighter: #101E20; /* FIXED: Was #E6F2F3 (L=92.7%) — light pastel, wrong for dark theme */ --color-info-dark: #4A6366; --color-info-darker: #2F3F41; --color-info-text: #E6F2F3; /* ========== SHADOW SYSTEM (Subtle Warm Glow) ========== */ --shadow-xs: 0 1px 2px rgba(232, 152, 94, 0.1); --shadow-sm: 0 2px 4px rgba(232, 152, 94, 0.1); --shadow-md: 0 4px 12px rgba(232, 152, 94, 0.1), 0 0 4px rgba(232, 152, 94, 0.05); --shadow-lg: 0 12px 24px rgba(232, 152, 94, 0.1), 0 0 8px rgba(232, 152, 94, 0.08); --shadow-xl: 0 20px 40px rgba(232, 152, 94, 0.15), 0 0 12px rgba(232, 152, 94, 0.1); /* ========== TRANSITION SYSTEM ========== */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; --color-secondary-text: #FCEFE3; /* ========== BADGE SYSTEM (Dark Theme Optimized) ========== */ --badge-secondary-bg: var(--color-secondary-dark); --badge-secondary-text: var(--color-secondary-lighter); --badge-secondary-ring: var(--color-secondary-lighter); --badge-success-bg: var(--color-success-dark); --badge-success-text: var(--color-success-lighter); --badge-success-ring: var(--color-success-lighter); --badge-warning-bg: var(--color-warning-dark); --badge-warning-text: var(--color-warning-lighter); --badge-warning-ring: var(--color-warning-lighter); --badge-primary-bg: var(--color-primary-dark); --badge-primary-text: var(--color-primary-lighter); --badge-primary-ring: var(--color-primary-lighter); --badge-error-bg: var(--color-error-dark); --badge-error-text: var(--color-error-lighter); --badge-error-ring: var(--color-error-lighter); --badge-info-bg: var(--color-info-dark); --badge-info-text: var(--color-info-lighter); --badge-info-ring: var(--color-info-lighter); /* ========== DYNAMIC CHAIN PALETTE (Warm Glow) ========== */ --color-chain-1: #81c784; --color-chain-2: #64b5f6; --color-chain-3: #ffd54f; --color-chain-4: #ce93d8; /* ========== GLASS EFFECTS ========== */ --sidebar-shadow-opacity: 0.2; --sidebar-rim-opacity: 0.15; /* ========== HEATMAP (Mini Calendar) ========== */ --color-heatmap-empty: #705d42; --color-heatmap-low: #a37147; --color-heatmap-mid: #b67c4e; --color-heatmap-high: #cd8955; --color-component-segmented-button-fg: var(--color-text-on-dark); --color-component-segmented-button-hover-fg: var(--color-text-on-dark); --color-component-segmented-button-active-bg: color-mix(in srgb, var(--color-surface-1) 84%, var(--color-bg-main) 16%); --color-component-segmented-button-active-fg: var(--color-text-on-dark); --color-component-card-elevated-bg-start: color-mix(in srgb, var(--color-surface-1) 94%, var(--color-primary-light) 6%); --color-component-card-elevated-bg-mid: color-mix(in srgb, var(--color-surface-1) 98%, var(--color-primary-light) 2%); --color-component-card-elevated-bg-end: color-mix(in srgb, var(--color-surface-1) 96%, var(--color-accent-light) 4%); } /* ============================================================================ DARK B THEME - Amethyst / Space Indigo ========================================================================== */ :root[data-theme="dark-b"], [data-theme="dark-b"] { /* ========== PRIMARY COLOR SYSTEM ========== */ --color-primary: #b98ea7; --color-primary-light: #f0d3f7; --color-primary-lighter: #1E1535; /* FIXED: Was #f0d3f7 (L=89.8%) — too light for dark theme. Now dark amethyst tint */ --color-primary-dark: #24161f; --color-primary-darker: #4e2e38; --color-primary-hover: #d1a6bf; --color-primary-fg: #120d31; --color-primary-contrast: var(--color-primary-fg); /* ========== SECONDARY COLOR SYSTEM ========== */ --color-secondary: #302f4d; --color-secondary-light: #1E1D30; /* FIXED: Was #e0e0ff (L=93.9%) — too light for dark theme */ --color-secondary-lighter: #18172A; /* FIXED: Was #e0e0ff (L=93.9%) — too light for dark theme */ --color-secondary-dark: #0d0924; --color-secondary-darker: #0a0818; --color-secondary-hover: #45436a; --color-secondary-text: #e0e0ff; /* ========== BACKGROUND & SURFACE ========== */ --color-bg-main: #0b081e; --color-bg-secondary: #262244; /* Lightened from #1A1635 for >1.3 contrast against bg-main */ --color-bg-tertiary: #4A4875; --color-bg-hover: #1e1940; --color-bg-disabled: #706ca0; --color-surface-0: #0b081e; --color-surface-1: #262244; /* Matched to bg-secondary */ --color-surface-2: #454370; --color-surface-panel: var(--color-surface-2); --color-surface-chip: var(--color-surface-2); --color-text-chip: var(--color-text-secondary); /* Raised elevation */ /* ========== TEXT COLORS ========== */ --color-text-main: #f0d3f7; --color-text-secondary: #FCEAF5; /* Lightened from #E0B0D0 for >4.5 contrast */ --color-text-muted: #CDCBD9; --color-text-disabled: #d8d3ec; --color-text-contrast: #120d31; /* ========== BORDER COLORS ========== */ --color-border-subtle: #9F9CD0; /* Lightened from #646299 to pass 3:1 definitively */ --color-border: #9F9CD0; --color-border-normal: #9F9CD0; --color-border-strong: #B0AECE; /* FIXED: Was #CDCBD9 (L=82.4%) — slightly too bright, toned down */ /* ========== ACCENT & STATES ========== */ --color-accent: #f0d3f7; --color-accent-light: #2A1F30; /* FIXED: Was #f0d3f7 (L=89.8%) — too light for dark theme */ --color-accent-lighter: #1A1530; /* FIXED: Was #ffffff (L=100%) — wrong for dark theme. Now dark indigo tint */ --color-accent-dark: #633e4b; --color-accent-darker: #4a2e38; --color-success: #4ecdc4; --color-success-light: #1a3a38; --color-success-lighter: #0F2A24; /* FIXED: Was #d1f3eb (L=88.6%) — light pastel, wrong for dark theme */ --color-success-dark: #051f1c; --color-success-darker: #102523; --color-success-text: #d1f3eb; --color-error: #ff6b8b; --color-error-light: #3d121b; --color-error-lighter: #2A1015; /* FIXED: Was #f5e8e0 (L=92.0%) — light pastel, wrong for dark theme */ --color-error-dark: #260a0f; --color-error-darker: #290c12; --color-error-text: #f5e8e0; --color-warning: #ffe66d; --color-warning-light: #3d3512; --color-warning-lighter: #2A2510; /* FIXED: Was #ffe66d (L=71.4%) — too bright for dark theme */ --color-warning-dark: #292408; --color-warning-darker: #26210b; --color-warning-text: #ffe66d; --color-info: #a29bfe; --color-info-light: #7E7CB2; /* Lightened from #646299 to fix text contrast on info-dark */ --color-info-lighter: #15162A; /* FIXED: Was #dbeafe (L=92.7%) — light pastel, wrong for dark theme */ --color-info-dark: #1f1d40; --color-info-darker: #15132b; --color-info-text: #E0E0FF; /* ========== SHADOW SYSTEM (Amethyst Glow) ========== */ --shadow-xs: 0 1px 2px rgba(185, 142, 167, 0.1); --shadow-sm: 0 2px 4px rgba(185, 142, 167, 0.15); --shadow-md: 0 4px 12px rgba(185, 142, 167, 0.18); --shadow-lg: 0 12px 24px rgba(185, 142, 167, 0.2); --shadow-xl: 0 20px 40px rgba(185, 142, 167, 0.25); /* ========== TRANSITION SYSTEM ========== */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* ========== DYNAMIC CHAIN PALETTE (Amethyst Glow) ========== */ --color-chain-1: #81c784; --color-chain-2: #64b5f6; --color-chain-3: #ffd54f; --color-chain-4: #ce93d8; /* ========== GLASS EFFECTS ========== */ --sidebar-shadow-opacity: 0.2; --sidebar-rim-opacity: 0.15; /* ========== HEATMAP (Mini Calendar) ========== */ --color-heatmap-empty: #555273; --color-heatmap-low: #836682; --color-heatmap-mid: #93728d; --color-heatmap-high: #a6809a; --color-component-segmented-button-fg: var(--color-text-on-dark); --color-component-segmented-button-hover-fg: var(--color-text-on-dark); --color-component-segmented-button-active-bg: color-mix(in srgb, var(--color-surface-1) 84%, var(--color-bg-main) 16%); --color-component-segmented-button-active-fg: var(--color-text-on-dark); --color-component-card-elevated-bg-start: color-mix(in srgb, var(--color-surface-1) 94%, var(--color-primary-light) 6%); --color-component-card-elevated-bg-mid: color-mix(in srgb, var(--color-surface-1) 98%, var(--color-primary-light) 2%); --color-component-card-elevated-bg-end: color-mix(in srgb, var(--color-surface-1) 96%, var(--color-accent-light) 4%); }