/* Appleby Systems light/dark theme layer. */
html[data-theme="light"] { color-scheme: light; }

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #151a1c;
  --chalk: #101416;
  --mist: #1b2123;
  --line: #343d40;
  --line-soft: #293134;
  --ink: #edf1ef;
  --ink-soft: #b7c1bf;
  --ink-faint: #8f9b99;
  --char: #0b0f10;
  --char-2: #13191b;
  --char-line: #2d3739;
  --char-fg: #eef1ef;
  --char-fg-soft: #aeb9b7;
  --char-fg-faint: #7f8d8b;
  --accent: #63c5bc;
  --accent-hi: #7ad6cd;
  --accent-deep: #287f79;
  --accent-wash: #172826;
  --accent-on-char: #63c5bc;
  --detail: #c1a06b;
  --bg: var(--chalk);
  --surface: var(--paper);
  --border: var(--line);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --fg-faint: var(--ink-faint);
  --shadow-sm: 0 1px 2px #0004, 0 4px 12px -8px #0008;
  --shadow: 0 1px 2px #0004, 0 16px 40px -20px #000b;
}

.theme-toggle {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-soft, currentColor);
  display: inline-grid;
  place-items: center;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
.theme-toggle:hover {
  color: var(--fg, currentColor);
  background: color-mix(in srgb, var(--fg, currentColor) 6%, transparent);
  border-color: var(--line-soft, currentColor);
}
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .theme-label {
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}
.theme-toggle .theme-sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-moon { display: none; }

html[data-theme="dark"] .site-header {
  background: color-mix(in srgb, var(--chalk) 91%, transparent);
}
html[data-theme="dark"] .menu-panel {
  background: var(--paper);
}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}

/* The unlinked /start campaign page has its own compact palette. */
html[data-theme="dark"] body:has(.masthead) {
  --paper: #101416;
  --ink: #edf1ef;
  --muted: #aeb8b5;
  --green: #315f5a;
  --line: #30393b;
  --accent: #a7d8b5;
}
html[data-theme="dark"] body:has(.masthead) .approach { background: #181f20; }
html[data-theme="dark"] body:has(.masthead) .skip { background: #151b1d; }
html[data-theme="dark"] body:has(.masthead) .field input,
html[data-theme="dark"] body:has(.masthead) .field textarea {
  background: #151b1d;
  border-color: #3b4749;
  color: var(--ink);
}
html[data-theme="dark"] body:has(.masthead) .field textarea::placeholder { color: #899592; }
.masthead .theme-toggle { margin-left: auto; margin-right: .3rem; }

@media (prefers-reduced-motion: no-preference) {
  body, .site-header, .menu-panel, .card, .substance-aside, .approach,
  input, textarea, select { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
}

/* Keep the full navigation comfortable around the desktop breakpoint. */
@media (min-width: 62rem) and (max-width: 72rem) {
  .header-inner { gap: .65rem !important; }
  .nav-desktop > ul { gap: .05rem !important; }
  .nav-link { padding-inline: .35rem !important; font-size: .86rem !important; }
  .header-cta { display: none !important; }
}