:root{
  /* canonical names */
  --brand: #FF6B2C; --brand-dark: #E2551B; --brand-mid: #1E2733; --brand-deep: #0A0E13;
  --brand-accent: #5FD3C4; --brand-mark2: #FF9466; --gold: #e7c14b;
  /* rgb triples for rgba() — themeable translucent panels/bars */
  --brand-rgb: 255, 107, 44; --map-rgb: 31, 138, 91; --brand-deep-rgb: 10, 14, 19; --brand-accent-rgb: 95, 211, 196;
  /* aliases used by the existing pages (map, landing, about, admin, vr) */
  --red: #FF6B2C; --red-dark: #E2551B;
  --green: #FF6B2C; --green-600: #E2551B; --green-800: #1E2733; --green-900: #0A0E13;
  --lime: #5FD3C4;
  --t360: #FF6B2C;
  --ink: #12171D; --muted: #5C6B7C; --line: #E4E0D6; --bg: #F1EEE7;
  --card: #ffffff;          /* surface (cards, panels, sidebar) */
}

/* Dark theme — surfaces/text flip; brand accent colours stay the same.
   Applied by theme.js via <html data-theme="dark">. */
: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)}