/* Design tokens - single source of truth for all variables Theme switching: CSS defaults to dark (:root). Light mode via data-theme="light". Palette: Baltic Blue / Cerulean / Yale Blue / Sky Blue Light / Alabaster Grey family. */ /* Dark mode (default) */ :root { color-scheme: light dark; /* Colors */ --primary-color: #81c3d7; --primary-dark: #3a7ca5; --link-color: #d9dcd6; --secondary-color: #8fa8b8; --success-color: #66bb6a; --error-color: #ef5350; --warning-color: #ffa726; --info-color: #81c3d7; --ml-color: #ab47bc; --background: #0e1e28; --surface: #1a2d3a; --surface-elevated: #243a49; --surface-hover: rgba(129, 195, 215, 0.06); --surface-active: rgba(129, 195, 215, 0.1); --text-primary: #d9dcd6; --text-secondary: #8fa8b8; --border-color: #2a4050; --toggle-bg: #4a6070; --toggle-knob: #0e1e28; /* Overlays */ --overlay: rgba(14, 30, 40, 0.6); /* Interactive */ --focus-ring-color: rgba(129, 195, 215, 0.15); --table-header-tint: rgba(129, 195, 215, 0.06); --table-header-tint-strong: rgba(129, 195, 215, 0.12); /* Text on colored backgrounds */ --on-primary: #fff; --on-primary-muted: rgba(255, 255, 255, 0.85); /* Content area background (light blue tint) */ --content-bg: #121f2a; /* Header */ --header-bg: #2f6690; --header-text: #ffffff; --header-text-muted: rgba(255, 255, 255, 0.85); /* Sidebar active state */ --sidebar-active-bg: #16425b; --sidebar-active-text: var(--on-primary); --sidebar-active-border: #81c3d7; --sidebar-active-divider: rgba(129, 195, 215, 0.15); /* Status tints (low-opacity backgrounds for badges, chips, indicators) */ --success-tint: rgba(102, 187, 106, 0.15); --warning-tint: rgba(255, 167, 38, 0.15); --warning-tint-hover: rgba(255, 167, 38, 0.2); --warning-tint-active: rgba(255, 167, 38, 0.25); --info-tint: rgba(66, 165, 245, 0.15); --error-tint: rgba(239, 83, 80, 0.15); --error-tint-subtle: rgba(239, 83, 80, 0.08); --neutral-tint: rgba(158, 158, 158, 0.15); --success-text: #66bb6a; --warning-text: #ffa726; --error-text: #f07573; /* Layout */ --sidebar-width: 340px; --right-panel-width: 260px; --header-height: 36px; /* Spacing */ --spacing-2xs: 0.125rem; --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 0.75rem; --spacing-base: 1rem; --spacing-lg: 1.25rem; --spacing-xl: 1.5rem; --spacing-2xl: 2rem; --spacing-3xl: 2.5rem; /* Typography */ --font-size-2xs: 0.65rem; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-md: 0.9375rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.75rem; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.2); --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.4); /* Transitions */ --transition-fast: 100ms ease-in-out; --transition-base: 200ms ease-out; /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-pill: 10px; --radius-full: 50%; } /* Light mode - activated by data-theme="light" on Warm Alabaster-tinted backgrounds, Yale/Baltic blues for text and brand. */ [data-theme="light"] { --primary-color: #2f6690; --primary-dark: #16425b; --link-color: #162530; --secondary-color: #546e7a; --success-color: #4CAF50; --error-color: #f44336; --warning-color: #ff9800; --info-color: #2f6690; --ml-color: #7b1fa2; --background: #e2e4dc; --surface: #ffffff; --surface-elevated: #ffffff; --surface-hover: rgba(47, 102, 144, 0.05); --surface-active: rgba(47, 102, 144, 0.08); --text-primary: #162530; --text-secondary: #3e5565; --border-color: #cdd0c8; --toggle-bg: #a8b0a8; --toggle-knob: #ffffff; --focus-ring-color: rgba(47, 102, 144, 0.12); --table-header-tint: rgba(47, 102, 144, 0.06); --table-header-tint-strong: rgba(47, 102, 144, 0.12); --content-bg: #d6e6f0; --header-bg: #2f6690; /* --header-text and --header-text-muted: same as dark (white works on both blues) */ --sidebar-active-bg: #16425b; --sidebar-active-border: #81c3d7; --sidebar-active-divider: rgba(0, 0, 0, 0.1); /* --on-primary, --on-primary-muted: same as dark (white works on both blues) */ --success-tint: #e8f5e9; --warning-tint: #fff3e0; --info-tint: #e3f2fd; --error-tint: #ffebee; --error-tint-subtle: rgba(244, 67, 54, 0.06); --neutral-tint: rgba(117, 117, 117, 0.1); --success-text: #1b5e20; --warning-text: #bf360c; --error-text: #b71c1c; }