/* Home Server look. Glass panels on a flat dark ground, white accent.
   Loaded after each app stylesheet so these tokens win over that file's :root. */

:root {
  --bg-base: #060708;
  --bg-image: none;
  --accent: #F4F5F7;
  --accent-2: #FFFFFF;
  --accent-strong: #E3E5EA;
  --accent-ink: #17191e;
  --cat-1: var(--accent);
}

body::before,
body[data-page="profile"]::before { background-image: var(--bg-image); }

.hero__bg {
  background-image: var(--bg-image);
  background-color: #14161a;
}

.logo-badge svg { width: 34px; height: 34px; display: block; }
.logo-badge--sm svg { width: 30px; height: 30px; }
.brand__mark svg { width: 18px; height: 18px; display: block; }

/* White accent needs dark type on filled controls. */
html :is(
  .btn--primary, .btn--primary:hover,
  .iconbtn__badge, .menu__badge, .bars__tag,
  .segmented__opt[aria-checked="true"],
  .toggle[aria-pressed="true"] .toggle__label,
  .pbtn--primary, .pbtn--primary:hover, .pid__initials,
  .qr__refresh, .qr__refresh:hover,
  .check input:checked + .check__box svg,
  .ux-btn--primary, .ux-btn--primary:hover
) { color: var(--accent-ink); }
body[data-page] .btn:not(.btn--ghost),
body[data-page] .btn:not(.btn--ghost):hover { color: var(--accent-ink); }
html .toggle[aria-pressed="true"] .toggle__knob {
  background: var(--accent-ink);
  color: #fff;
}