/* The whole palette fades at the root so nested text does not lag behind. */
@property --page {
  syntax: "<color>";
  inherits: true;
  initial-value: #f2f0e7;
}

@property --text {
  syntax: "<color>";
  inherits: true;
  initial-value: #404936;
}

@property --muted {
  syntax: "<color>";
  inherits: true;
  initial-value: #58654c;
}

@property --label {
  syntax: "<color>";
  inherits: true;
  initial-value: #5e6a53;
}

@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #97452f;
}

@property --line {
  syntax: "<color>";
  inherits: true;
  initial-value: #9aa78c;
}

@property --border {
  syntax: "<color>";
  inherits: true;
  initial-value: #b1bba5;
}

@property --node {
  syntax: "<color>";
  inherits: true;
  initial-value: #eeeee3;
}

@property --node-border {
  syntax: "<color>";
  inherits: true;
  initial-value: #748461;
}

@property --hover {
  syntax: "<color>";
  inherits: true;
  initial-value: #eadbd0;
}

@property --surface {
  syntax: "<color>";
  inherits: true;
  initial-value: #e5e9dc;
}

@property --selection {
  syntax: "<color>";
  inherits: true;
  initial-value: #d9b5a3;
}

@property --shadow {
  syntax: "<color>";
  inherits: true;
  initial-value: #48513b0d;
}

:root {
  color-scheme: light;
  --theme-fade-duration: 750ms;
  --theme-fade-easing: ease-in-out;
  --page: #f2f0e7;
  --text: #404936;
  --muted: #58654c;
  --label: #5e6a53;
  --accent: #97452f;
  --line: #9aa78c;
  --border: #b1bba5;
  --node: #eeeee3;
  --node-border: #748461;
  --hover: #eadbd0;
  --surface: #e5e9dc;
  --selection: #d9b5a3;
  --shadow: #48513b0d;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #20241f;
  --text: #e0e4d8;
  --muted: #acb6a3;
  --label: #acb4a4;
  --accent: #d69a7d;
  --line: #68715e;
  --border: #686f60;
  --node: #292f26;
  --node-border: #acb7a0;
  --hover: #40352d;
  --surface: #30372b;
  --selection: #6b4a39;
  --shadow: #00000040;
}

:root.theme-fading {
  transition-property: --page, --text, --muted, --label, --accent, --line, --border, --node, --node-border, --hover, --surface, --selection, --shadow;
  transition-duration: var(--theme-fade-duration);
  transition-timing-function: var(--theme-fade-easing);
}

/* Keep the same palette interpolation for SVG and inherited colors. */
.theme-fading .network *,
.theme-fading .brand * {
  transition: none !important;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: .8125rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.theme-toggle:hover { background: var(--surface); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg {
  width: 1.140625rem;
  height: 1.140625rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
}
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: block; }
[data-theme="dark"] .theme-toggle .moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  :root.theme-fading { transition: none; }
}