/* The existing composition is shared by both palettes. */
:root {
  --accent-ink: #c9f06b;
  --dot-blend-source: #daff7a; /* Difference blending keeps the resting dot lime. */
  --ink-on-accent: #11120f;
  --focus-ink: #c9f06b;
  --dialog-surface: #11120ff5;
  --dialog-backdrop: #000c;
  --toast-surface: #e6e5dc;
  --toast-ink: #11120f;
  --watermark-ink: #23261f;
}

:root[data-theme="light"] {
  --bg: #f4f1e8;
  --paper: #181c17;
  --muted: #606458;
  --line: #cdd0c2;
  --accent: #c9f06b;
  --dot-blend-source: #2b017d;
  --accent-ink: #4c6220;
  --ink-on-accent: #181c17;
  --focus-ink: #4c6220;
  --dialog-surface: #f4f1e8fa;
  --dialog-backdrop: #181c1780;
  --toast-surface: #181c17;
  --toast-ink: #f4f1e8;
  --watermark-ink: #e0e3d5;
  color-scheme: light;
}

:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] .adaptive-contrast .name-shadow { display: none; }

::selection { background: var(--accent); color: var(--ink-on-accent); }
button:focus-visible, a:focus-visible { outline-color: var(--focus-ink); }

.typed-highlight, .skip-link, .view-label, .pointer-ring.is-card {
  color: var(--ink-on-accent);
}
.chapter-rail:hover { color: var(--ink-on-accent); }
.chapter-rail:hover .chapter-number { color: inherit; }
.image-dialog { background: var(--dialog-surface); }
.image-dialog::backdrop { background: var(--dialog-backdrop); }
.toast { background: var(--toast-surface); color: var(--toast-ink); }
.contact-watermark { color: var(--watermark-ink); }

:root[data-theme="light"] em,
:root[data-theme="light"] .motion-icon,
:root[data-theme="light"] .small-cross,
:root[data-theme="light"] .site-footer button span {
  color: var(--accent-ink);
}
:root[data-theme="light"] .text-link:hover,
:root[data-theme="light"] .email-link:hover,
:root[data-theme="light"] .copy-button:hover {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
}
:root[data-theme="light"] .pointer-ring.is-link { border-color: var(--accent-ink); }
:root[data-theme="light"] .underneath { background: #b9dedd; }

/* Blended glyphs keep a white source so parchment becomes ink. */
:root[data-theme="light"] .adaptive-contrast .name-text,
:root[data-theme="light"] .adaptive-contrast .intro-prefix,
:root[data-theme="light"] .adaptive-contrast .based-line,
:root[data-theme="light"] .adaptive-contrast .typing-caret {
  color: #fff;
}

#theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 8px;
  min-width: 38px;
  min-height: 40px;
  padding: 8px 2px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
#theme-toggle:hover { color: var(--accent-ink); }
#theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  color: var(--accent-ink);
}
#theme-icon svg { display: block; width: 100%; height: 100%; }

@media (max-width: 1100px) and (min-width: 761px) {
  .site-header { gap: 18px; }
  .motion-toggle { margin-left: 8px; }
}

@media (max-width: 760px) {
  .site-header { gap: 10px; padding-inline: 18px; }
  .brand { flex-shrink: 0; }
  .header-description { min-width: 0; flex-shrink: 1; }
  .header-description > span:first-child {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .local-time { flex-shrink: 0; }
  .motion-toggle { margin-left: 0; }
  #theme-toggle {
    flex: 0 0 40px;
    width: 40px;
    height: 44px;
    min-width: 40px;
    padding: 0;
  }
  #theme-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 480px) {
  .site-header { gap: 8px; padding-inline: 14px; }
  .header-description .muted { display: none; }
  .motion-toggle {
    flex: 0 0 36px;
    width: 36px;
    height: 44px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  #motion-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 360px) {
  .site-header { gap: 6px; padding-inline: 12px; }
  .brand { width: 30px; }
  .local-time { min-width: 60px; }
}