:root{ /* canonical names */ --brand: #1763b6; --brand-dark: #0f4a8a; --brand-mid: #0d3a6e; --brand-deep: #0a2747; --brand-accent: #8fc3f0; --brand-mark2: #3f8fe0; --gold: #e7c14b; /* rgb triples for rgba() — themeable translucent panels/bars */ --brand-rgb: 23, 99, 182; --brand-deep-rgb: 10, 39, 71; --brand-accent-rgb: 143, 195, 240; /* aliases used by the existing pages (map, landing, about, admin, vr) */ --red: #1763b6; --red-dark: #0f4a8a; --green: #1763b6; --green-600: #0f4a8a; --green-800: #0d3a6e; --green-900: #0a2747; --lime: #8fc3f0; --t360: #1763b6; --ink: #13202b; --muted: #5b6470; --line: #e2e8ef; --bg: #f3f6fa; --card: #ffffff; /* surface (cards, panels, sidebar) */ } /* Dark theme — surfaces/text flip; brand accent colours stay the same. Applied by theme.js via . */ :root[data-theme="dark"]{ --bg: #0f1417; --card: #171f24; --ink: #e8eef0; --muted:#9aa7ad; --line: #2a343a; } /* Theme toggle button (mounted by theme.js) */ .theme-toggle{font-size:16px;line-height:1;cursor:pointer;border-radius:99px; width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center; background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28)} .theme-toggle:hover{background:rgba(255,255,255,.26)} .theme-toggle.float{position:fixed;right:14px;bottom:14px;z-index:9998;width:42px;height:42px;font-size:19px; background:var(--brand,#1f8a5b);border-color:rgba(255,255,255,.4);box-shadow:0 6px 18px rgba(0,0,0,.32)}