/* Existing light colours remain the fallbacks in the component styles. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --theme-surface: #151614;
  --theme-panel: #222420;
  --theme-ink: #f0f1eb;
  --theme-muted: #b6b9af;
  --theme-subtle: #a9ada2;
  --theme-line: #494d43;
  --theme-glass: #1c1e1af5;
  --theme-hover: #34402b;
  --theme-hover-line: #6a8051;
  --theme-focus: #d2ee9a;
  --theme-placeholder: #2d3029;
  --nd-color-canvas: var(--theme-surface);
  --nd-color-surface: var(--theme-surface);
  --nd-color-surface-secondary: var(--theme-panel);
  --nd-color-ink: var(--theme-ink);
  --nd-color-ink-muted: var(--theme-muted);
  --nd-color-ink-subtle: var(--theme-subtle);
  --nd-color-line: var(--theme-line);
  --nd-color-accent: var(--theme-hover);
}
.portfolio-dock:has(.portfolio-theme-toggle:not([hidden])) { height: 52px; }
.portfolio-dock:has(.portfolio-theme-toggle:not([hidden])) > a { height: 44px; }
.portfolio-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--theme-ink, #252522);
  cursor: pointer;
}
.portfolio-theme-toggle[hidden] { display: none; }
.portfolio-theme-toggle:hover { background: var(--theme-panel, #f3f3f1); }
.portfolio-dock .portfolio-theme-toggle svg { width: 18px; height: 18px; }
.portfolio-theme-toggle .theme-sun { display: none; }
[data-theme="dark"] .portfolio-theme-toggle .theme-sun { display: block; }
[data-theme="dark"] .portfolio-theme-toggle .theme-moon { display: none; }
.nd-portfolio .portfolio-theme-toggle:focus-visible { outline: 2px solid var(--theme-focus, #626c35) !important; outline-offset: 1px; }
.portfolio-dock:has(.portfolio-theme-toggle:not([hidden])) .portfolio-top-link { top: 8px; }
/* Only the monochrome client logos are inverted. Project artwork is untouched. */
[data-theme="dark"] #main .logo-garden-artboard { filter: grayscale(1) invert(1); opacity: .75; }
[data-theme="dark"] .portfolio-contact-dialog::backdrop { background: rgb(0 0 0 / .55); }
[data-theme="dark"] .nd-portfolio ::selection { background: #d2ee9a; color: #151614; }
@media (hover: hover) { [data-theme="dark"] #main .logo-garden-slot:hover .logo-garden-artboard { opacity: 1; } }