/* ============================================================= Centralized Theme Variables Light theme is the default (applied to :root). Switch to dark by setting data-theme="dark" on . ============================================================= */ :root, :root[data-theme="light"] { /* --- Palette --- */ --color-white: #ffffff; /* --- Spacing --- */ --spacing-6: 1.5rem; --spacing-10: 7.5rem; /* --- Backgrounds --- */ --bg-canvas: #f3f4f2; --bg-surface: #f8f8f6; --bg-surface-raised: #ffffff; --bg-surface-muted: #e8e9e5; --bg-bubble-user: #dfdfdf; /* --- Text --- */ --text-primary: #202220; --text-secondary: #545853; --text-tertiary: #6D706C; --text-disabled: #adb1ab; --text-inverse: #fdfefd; --text-on-brand: #fdfefd; /* --- Borders --- */ --border-subtle: #e1e3de; --border-default: #e0e0e0; --border-strong: #b3b8b1; --border-focus: #4d534d; --border-inverse: rgba(253, 254, 253, 0.88); /* --- Brand --- */ --brand-primary: #2f332f; --brand-pressed: #242724; --brand-surface: #e6e8e4; --brand-muted: #daddd8; --brand-on-brand: #fdfefd; /* --- Status --- */ --status-success-fg: #2f7a4a; --status-success-surface: #e3f1e7; --status-success-border: #b5d8bf; --status-warning-fg: #9a5d0f; --status-warning-surface: #f9ecd5; --status-warning-border: #ebcb91; --status-error-fg: #b3342a; --status-error-surface: #f8e1de; --status-error-border: #e7b2ab; --status-info-fg: #2f6787; --status-info-surface: #deedf6; --status-info-border: #a9cbde; /* --- State --- */ --state-disabled: rgba(84, 88, 83, 0.16); --state-selected: rgba(179, 51, 42, 0.06); /* --- Nav --- */ --nav-active: #E74C3C; /* --- Glass / translucency --- */ --glass-surface: rgba(249, 250, 248, 0.25); --glass-strong: rgba(249, 250, 248, 0.9); --glass-border: rgba(253, 254, 253, 0.88); --glass-tint: rgba(246, 247, 244, 0.2); --glass-gradient-start: #f3f4f2; --glass-gradient-end: rgba(243, 244, 242, 0); /* --- Syncfusion component overrides --- */ --sf-tooltip-bg: #ffffff; --sf-tooltip-text: #202220; --sf-groupcaption-bg: #e8e9e5; --sf-primary-btn-bg: #2f332f; --sf-primary-btn-hover: #242724; --sf-primary-btn-disabled-bg: #e8e9e5; --sf-primary-btn-disabled-text: #adb1ab; --sf-dialog-border: #e0e0e0; --sf-chip-success-color: #2f7a4a; /* --- Chart / gauge axis --- */ --chart-axis-line: #e1e3de; --chart-axis-label: #545853; --chart-grid-line: #e8e9e5; /* --- Misc --- */ --gradient: linear-gradient(rgb(255, 106, 61), rgb(229, 57, 53) 56%, rgb(122, 31, 43)); --scrollbar-thumb: #b3b8b1; --scrollbar-thumb-hover: #6D706C; --scrollbar-track: #e8e9e5; } :root[data-theme="dark"] { /* --- Backgrounds --- */ --bg-canvas: #202225; --bg-surface: #282b2f; --bg-surface-raised: #333232; --bg-surface-muted: #201F1F; --bg-bubble-user: #414040; /* --- Text --- */ --text-primary: #ffffff; --text-secondary: #acaeb8; --text-tertiary: #95979f; --text-disabled: #6f6c6c; --text-inverse: #202225; --text-on-brand: #ffffff; /* --- Borders --- */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: #414040; --border-strong: #6f6c6c; --border-focus: #65acfd; --border-inverse: rgba(0, 0, 0, 0.5); /* --- Brand --- */ --brand-primary: #354b76; --brand-pressed: #243555; --brand-surface: #293958; --brand-muted: #333232; --brand-on-brand: #ffffff; /* --- Status --- */ --status-success-fg: #74fd65; --status-success-surface: rgba(116, 253, 101, 0.12); --status-success-border: rgba(116, 253, 101, 0.25); --status-warning-fg: #F39C12; --status-warning-surface: rgba(243, 156, 18, 0.12); --status-warning-border: rgba(243, 156, 18, 0.25); --status-error-fg: #fd6565; --status-error-surface: rgba(253, 101, 101, 0.12); --status-error-border: rgba(253, 101, 101, 0.25); --status-info-fg: #65acfd; --status-info-surface: rgba(101, 172, 253, 0.12); --status-info-border: rgba(101, 172, 253, 0.25); /* --- State --- */ --state-disabled: rgba(255, 255, 255, 0.16); --state-selected: rgba(253, 101, 101, 0.06); /* --- Nav --- */ --nav-active: #E74C3C; /* --- Glass / translucency --- */ --glass-surface: rgba(32, 34, 37, 0.4); --glass-strong: rgba(32, 34, 37, 0.92); --glass-border: rgba(255, 255, 255, 0.06); --glass-tint: rgba(32, 34, 37, 0.2); --glass-gradient-start: #202225; --glass-gradient-end: rgba(32, 34, 37, 0); /* --- Syncfusion component overrides --- */ --sf-tooltip-bg: #202225; --sf-tooltip-text: #ffffff; --sf-groupcaption-bg: #333232; --sf-primary-btn-bg: #354b76; --sf-primary-btn-hover: #243555; --sf-primary-btn-disabled-bg: #414040; --sf-primary-btn-disabled-text: #6f6c6c; --sf-dialog-border: #414040; --sf-chip-success-color: chartreuse; /* --- Chart / gauge axis --- */ --chart-axis-line: #3b3b3b; --chart-axis-label: #ffffff; --chart-grid-line: #201f1f; /* --- Misc --- */ --gradient: linear-gradient(rgb(255, 106, 61), rgb(229, 57, 53) 56%, rgb(122, 31, 43)); --scrollbar-thumb: dimgrey; --scrollbar-thumb-hover: rgba(255, 255, 255, 0.5); --scrollbar-track: #202225; }