html {
font-size: 90%;
}
:root {
/*
* Brand colors. Fallback defaults live here so the app looks right
* even before JS runs; assets/js/theme-colors.js overrides these
* three (plus the derived -hover/-soft pairs) from whatever the user
* saved on the Settings page, applied inline on before first
* paint — same idea as the light/dark theme attribute in index.php.
*/
--brand-primary: rgb(155, 0, 71);
--brand-primary-hover: rgb(126, 0, 58);
--brand-soft: rgba(155, 0, 71, 0.1);
--brand-secondary: #6c757d;
--brand-secondary-hover: #5c636a;
--brand-secondary-soft: rgba(108, 117, 125, 0.1);
--page-background: #f6f7f9;
--surface: #ffffff;
--surface-muted: #f0f2f5;
--border-color: #e2e5ea;
--text-main: #20242b;
--text-muted: #6d7480;
--glass-surface: rgba(255, 255, 255, 0.68);
--glass-border: rgba(255, 255, 255, 0.78);
--glass-shadow: 0 18px 45px rgba(46, 39, 45, 0.1);
}
[data-bs-theme="dark"] {
--page-background: #17191d;
--surface: #22252b;
--surface-muted: #2b2f36;
--border-color: #383d46;
--text-main: #f3f4f6;
--text-muted: #aeb5c0;
--glass-surface: rgba(34, 37, 43, 0.76);
--glass-border: rgba(255, 255, 255, 0.12);
--glass-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
}