/* QWebHub's shared soft-grey light override. Dark tokens remain unchanged. */
[data-theme="light"] {
  --bg-primary: #eceff1;
  --bg-secondary: #f6f7f8;
  --bg-input: #ffffff;
  --bg-hover: #e2e6e9;
  --surface: #eceff1;
  --surface-raised: #fafbfb;
  --surface-sunken: #e3e7e9;
  --surface-modal: #f6f7f8;
  --surface-modal-head: #e4e8ea;

  --border: #cbd2d6;
  --border-strong: #aeb9c0;

  --text-primary: #252a2e;
  --text-secondary: #515a61;
  --text-strong: #202529;

  --sec-top: #dfe4e7;

  --shadow-modal: 0 18px 48px rgba(31, 39, 45, .14);
  --shadow-pop: 0 12px 32px rgba(31, 39, 45, .11);
}

[data-theme="light"] body,
[data-theme="light"] button,
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  font-weight: 500;
}

[data-theme="light"] .qp-label,
[data-theme="light"] .qa-muted,
[data-theme="light"] .qa-topbar-link,
[data-theme="light"] .hub-module-notes {
  font-weight: 600;
}

.hub-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}

.hub-theme-toggle:hover {
  background: var(--bg-hover);
}

.hub-theme-toggle:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

.hub-theme-toggle-icon {
  width: 1em;
  text-align: center;
}