/* * Shared design tokens for light and dark mode. * Loaded on every page, before any other stylesheet. * Theme is switched by javascript/theme.js, which sets * data-theme="dark" / "light" on . Without that attribute, * the OS-level color-scheme preference is used. */ :root { --font-family: 'Segoe UI', Roboto, Arial, sans-serif; --primary-color: #2563eb; --primary-hover: #1d4ed8; --primary-disabled: #b7c3d4; --primary-soft: #e8f0fe; --danger-color: #dc2626; --danger-hover: #b91c1c; --success-color: #16a34a; --warning-color: #d97706; --text-on-primary: #ffffff; --bg-page: #eef2f9; --bg-surface: #ffffff; --bg-surface-alt: #f4f7fb; --bg-hover: #eaf1ff; --bg-overlay: rgba(238, 242, 249, 0.75); --text-primary: #1e2430; --text-secondary: #5b6472; --text-muted: #808b9a; --border-color: #dde3ea; --border-strong: #c6cedb; --shadow-sm: 0 2px 5px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12); --tooltip-bg: #1e2430; --tooltip-text: #ffffff; --readonly-bg: #eef1f5; --readonly-text: #6b7280; --radius: 8px; --radius-sm: 4px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --primary-color: #3b82f6; --primary-hover: #60a5fa; --primary-disabled: #35405a; --primary-soft: #1c2b45; --danger-color: #f87171; --danger-hover: #fca5a5; --success-color: #4ade80; --warning-color: #fbbf24; --bg-page: #10141d; --bg-surface: #171d2b; --bg-surface-alt: #1e2534; --bg-hover: #223050; --bg-overlay: rgba(10, 13, 20, 0.75); --text-primary: #e7ebf2; --text-secondary: #9aa5b8; --text-muted: #707c90; --border-color: #2b3346; --border-strong: #3a4459; --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.5); --tooltip-bg: #2b3346; --tooltip-text: #e7ebf2; --readonly-bg: #1c2330; --readonly-text: #8b96a8; color-scheme: dark; } } :root[data-theme="dark"] { --primary-color: #3b82f6; --primary-hover: #60a5fa; --primary-disabled: #35405a; --primary-soft: #1c2b45; --danger-color: #f87171; --danger-hover: #fca5a5; --success-color: #4ade80; --warning-color: #fbbf24; --bg-page: #10141d; --bg-surface: #171d2b; --bg-surface-alt: #1e2534; --bg-hover: #223050; --bg-overlay: rgba(10, 13, 20, 0.75); --text-primary: #e7ebf2; --text-secondary: #9aa5b8; --text-muted: #707c90; --border-color: #2b3346; --border-strong: #3a4459; --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.5); --tooltip-bg: #2b3346; --tooltip-text: #e7ebf2; --readonly-bg: #1c2330; --readonly-text: #8b96a8; color-scheme: dark; } /* Thin, theme-aware scrollbars */ * { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--border-strong); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); } /* Smooth, non-jarring theme switching */ body, .tabs-container, .tabs, .content, table, th, td, .chartContainer, .loading-box, .login-container, .list-row, input, select, button, .switch .slider, .info-tooltip { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }