:root { /* Backgrounds */ --bg-primary: #ffffff; --bg-secondary: #eef0f2; --bg-accent: #8b7849; /* Surfaces — semantic tokens introduced for dark-mode (read by components + theme-dark.css). */ --surface-1: #ffffff; /* Primary surface (cards, panels) */ --surface-2: #f8f7ff; /* Secondary surface (raised sections, toolbars) */ --surface-3: #eef0f2; /* Tertiary surface (input fills, hovered rows) */ --border-subtle: #e6e8ec; /* Faint borders / dividers */ --border-strong: #c9ccd2; /* Stronger borders / focus rings */ --shadow-color: 0, 0, 0; /* RGB triplet so components can compose rgba() */ /* Text */ --text-primary: #000000; --text-inverse: #ffffff; --text-accent: #8b7849; --text-muted: #666; /*Borders*/ --focus-color: #667eea; /*Border Radius*/ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 20px; --radius-lg: 40px; /* Actions */ --color-action: #4b8bec; --color-danger: #b81717; --color-success: #38a94a; /* Neutrals */ --color-light: #f8f7ff; --color-dark: #1d2844; /*Animation speeds*/ --anim-fast: 0.15s; --anim-normal: 0.3s; --anim-slow: 0.6s; /* SMD Colors */ --smd-red: #C32033; --smd-red-dark: #9f1827; --smd-red-soft: #d64555; } /* * Dark theme overrides. * Activated by Site.theme.set("dark") which writes data-theme="dark" on . * Palette aligned with Syncfusion's bootstrap5-dark.css (Bootstrap 5 dark) so the * EJ2 grid / dialog / dropdown chrome blends seamlessly with the app's own surfaces. * Canvas: #212529 (Bootstrap --bs-body-bg). Surfaces step up through #2b3035 -> #343a40. * Anything in components/* that resolves through these vars flips automatically; * hard-coded hex values that can't see these vars are patched in theme-dark.css. */ :root[data-theme="dark"] { /* Backgrounds — Bootstrap 5 dark canvas + progressively lighter surfaces. */ --bg-primary: #212529; /* Body canvas — same as Syncfusion grid container */ --bg-secondary: #2b3035; /* Section panels / sidebar */ --bg-accent: #c9a35b; /* Brand accent lifted for AA contrast on dark canvas */ /* Surfaces — purposely close in luminance to avoid banding; mirrors --bs-tertiary-bg etc. */ --surface-1: #2b3035; /* Cards, dropdowns, dialog content */ --surface-2: #343a40; /* Hovered rows, toolbar */ --surface-3: #495057; /* Input fills, pressed states */ --border-subtle: #343a40; --border-strong: #495057; --shadow-color: 0, 0, 0; /* Text — Bootstrap 5 dark --bs-body-color = #dee2e6; muted lifted for legibility. */ --text-primary: #dee2e6; --text-inverse: #212529; --text-accent: #e0c98c; --text-muted: #adb5bd; /* Focus + actions tuned for dark backdrop. */ --focus-color: #4dabf7; --color-action: #4dabf7; --color-danger: #ff6b6b; --color-success: #5ad06f; /* Neutrals — --color-light maps to a surface so components using it still read as one; --color-dark inverts so any "text-dark" reads as light text. */ --color-light: #2b3035; --color-dark: #dee2e6; /* Brand reds — slight lift on dark canvas. */ --smd-red: #e63b4f; --smd-red-dark: #C32033; --smd-red-soft: #f06f7d; } :root[data-theme="sharp"] { --radius-xs: 0px; --radius-sm: 0px; }