/* therka – shared header and menu colours: the topbar, its buttons, the
   dropdown menus and the logo. The theme is the data-theme attribute on
   <html> (js/theme.js); the sign-in page is always dark. */

[data-theme="dark"]{
  --topbar-bg:rgba(11,11,18,.96);--topbar-bdr:rgba(255,255,255,.06);
  --hb-bg:rgba(255,255,255,.055);--hb-bdr:rgba(255,255,255,.09);
  --hb-c:rgba(238,234,228,.58);--hb-hov:rgba(255,255,255,.09);
  --dd-bg:#13131f;--dd-bdr:rgba(255,255,255,.08);
  --dd-item:rgba(238,234,228,.72);--dd-hov:rgba(255,255,255,.05);--dd-sep:rgba(255,255,255,.06);
}

[data-theme="light"]{
  --topbar-bg:#e3f2ee;--topbar-bdr:#c9e4dc;
  --hb-bg:#f4f5fb;--hb-bdr:#e2e3f0;--hb-c:#4b5563;--hb-hov:#ebebf8;
  --dd-bg:#fff;--dd-bdr:#e2e3f0;--dd-item:#374151;--dd-hov:#f4f5fb;--dd-sep:#edeef5;
}

/* The therka logo: white in dark mode, brand teal in light mode (topbar and loading screen) */
.app-logo{font-family:'Poppins',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.01em;line-height:1}
[data-theme="dark"] .app-logo,[data-theme="dark"] .ld-logo{color:var(--c-primary)}
[data-theme="light"] .app-logo,[data-theme="light"] .ld-logo{color:var(--c-accent)}