/* Application colours; the original Wen Cheng logo and brand colours stay intact. */
:root {
  color-scheme: light;
  --wc-surface-muted: #f7f8fa;
  --wc-surface-hover: #f2f4f7;
  --wc-accent-surface: #f3f6fb;
  --wc-accent-selected: #edf1f7;
  --wc-accent-soft: #f2f5fa;
  --wc-block-surface: #f5f7fb;
  --wc-unread-surface: #f7f9fd;
  --wc-field-surface: #ffffff;
  --wc-field-border: #cdd3dc;
  --wc-active-border: #aebed7;
  --wc-dashed-border: #c5ccd6;
  --wc-draft-text: #805512;
  --wc-draft-surface: #fff5df;
  --wc-success-text: #275949;
  --wc-success-surface: #edf6f1;
  --wc-error-text: #a92828;
  --wc-error-surface: #fff1f1;
  --wc-on-badge: #ffffff;
  --wc-marker: #8c94a0;
  --wc-shadow: 0 12px 24px rgb(22 32 50 / 12%);
  --wc-backdrop: rgb(22 32 50 / 45%);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --wc-background: #15191f;
  --wc-surface: #15191f;
  --wc-text: #e7edf5;
  --wc-text-muted: #b1bac7;
  --wc-border: #3c4758;
  --wc-action: #acbeef;
  --wc-action-hover: #cfdbff;
  --wc-on-action: #172137;
  --wc-focus: #acbeef;
  --wc-selection-accent: #ee9696;
  --wc-selection-surface: #362429;
  --wc-surface-muted: #1e2631;
  --wc-surface-hover: #242d39;
  --wc-accent-surface: #202d42;
  --wc-accent-selected: #293853;
  --wc-accent-soft: #202d42;
  --wc-block-surface: #202a39;
  --wc-unread-surface: #1b2535;
  --wc-field-surface: #1c222b;
  --wc-field-border: #55647a;
  --wc-active-border: #788fae;
  --wc-dashed-border: #586b84;
  --wc-draft-text: #efc577;
  --wc-draft-surface: #3d301c;
  --wc-success-text: #97d8b5;
  --wc-success-surface: #20362e;
  --wc-error-text: #ffb4b4;
  --wc-error-surface: #3a2229;
  --wc-marker: #a1acbc;
  --wc-shadow: 0 12px 24px rgb(0 0 0 / 35%);
  --wc-backdrop: rgb(0 0 0 / 65%);
}

html { background: var(--wc-surface); }
.theme-toggle { flex-shrink: 0; color: var(--wc-text-muted); }
.theme-toggle:hover { color: var(--wc-action); background: var(--wc-surface-hover); }
/* Preserve the original blue artwork on a small light logo tile in dark mode. */
:root[data-theme='dark'] .brand-link .wc-logo { background: #fff; border-radius: 4px; box-shadow: 0 0 0 4px #fff; }
::selection { color: var(--wc-text); background: var(--wc-accent-selected); }