/* Smaller artwork, with the same comfortable touch target as the heart. */
.kp-header .kp-theme-toggle .icon { width: 20px; height: 20px; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --kp-bg: #17191a;
  --kp-surface: #202325;
  --kp-soft: #282c2e;
  --kp-accent: #202325;
  --kp-selection: #303537;
  --kp-ink: #f0f0ed;
  --kp-muted: #b2b5af;
  --kp-line: #383d3f;
  --bg: var(--kp-bg);
  --text: var(--kp-ink);
  --muted: var(--kp-muted);
  --border: var(--kp-line);
}
html[data-theme="dark"] body,
html[data-theme="dark"] .kp-loading-screen { background: var(--kp-bg); color: var(--kp-ink); }
html[data-theme="dark"] .kp-header,
html[data-theme="dark"] .kp-bottom-nav { background: #17191af5; border-color: var(--kp-line); }
html[data-theme="dark"] .kp-header .kp-search-liquid { background: var(--kp-ink); }
html[data-theme="dark"] .kp-product,
html[data-theme="dark"] .kp-post,
html[data-theme="dark"] .kp-creator-card,
html[data-theme="dark"] body > dialog { background: var(--kp-surface); border-color: var(--kp-line); color: var(--kp-ink); }
html[data-theme="dark"] .kp-pills,
html[data-theme="dark"] .kp-search,
html[data-theme="dark"] .kp-discovery-banner,
html[data-theme="dark"] .kp-category-shortcuts button,
html[data-theme="dark"] .kp-sidebar-note,
html[data-theme="dark"] .kp-account-card { background: var(--kp-soft); border-color: var(--kp-line); }
html[data-theme="dark"] .kp-app .kp-primary,
html[data-theme="dark"] #kp-dialog .kp-primary,
html[data-theme="dark"] body > dialog .primary,
html[data-theme="dark"] .kp-app .kp-create,
html[data-theme="dark"] .kp-rank,
html[data-theme="dark"] .kp-count { background: var(--kp-selection); border-color: var(--kp-line); color: var(--kp-ink); }
html[data-theme="dark"] .kp-feed-layout,
html[data-theme="dark"] .kp-mini-creator,
html[data-theme="dark"] .kp-profile-button,
html[data-theme="dark"] #kp-dialog .kp-bag-row { border-color: var(--kp-line); }
html[data-theme="dark"] .kp-product:hover { border-color: #656b6d; }
html[data-theme="dark"] .kp-header .kp-icon-button:hover,
html[data-theme="dark"] .kp-desktop-nav button:hover,
html[data-theme="dark"] .kp-category-shortcuts button:hover { background: var(--kp-selection); }
html[data-theme="dark"] .kp-app .kp-pill[aria-pressed="true"],
html[data-theme="dark"] .kp-desktop-nav button[aria-current="page"],
html[data-theme="dark"] .kp-app .kp-nav-item[aria-current="page"],
html[data-theme="dark"] .kp-app .kp-follow,
html[data-theme="dark"] .kp-section-heading em,
html[data-theme="dark"] .kp-discovery-banner h1 em,
html[data-theme="dark"] .kp-search .icon,
html[data-theme="dark"] .kp-empty > .icon,
html[data-theme="dark"] #kp-dialog .kp-detail-price,
html[data-theme="dark"] body > dialog .eyebrow,
html[data-theme="dark"] body > dialog .email-link { color: var(--kp-ink); }
html[data-theme="dark"] .kp-app .kp-nav-item,
html[data-theme="dark"] .kp-view-heading p,
html[data-theme="dark"] .kp-section-heading p,
html[data-theme="dark"] .kp-app .kp-product-like,
html[data-theme="dark"] #kp-dialog .kp-product-like,
html[data-theme="dark"] .kp-sample-note,
html[data-theme="dark"] .kp-account-card p,
html[data-theme="dark"] .kp-overline,
html[data-theme="dark"] .kp-banner-copy p,
html[data-theme="dark"] .kp-sidebar-heading button,
html[data-theme="dark"] .kp-mini-creator small,
html[data-theme="dark"] .kp-sidebar-note p,
html[data-theme="dark"] .kp-desktop-page-heading p,
html[data-theme="dark"] body > dialog p,
html[data-theme="dark"] body > dialog label,
html[data-theme="dark"] #kp-dialog .kp-dialog-note,
html[data-theme="dark"] #kp-dialog .kp-bag-row button { color: var(--kp-muted); }
html[data-theme="dark"] .kp-search input,
html[data-theme="dark"] body > dialog input,
html[data-theme="dark"] body > dialog textarea,
html[data-theme="dark"] body > dialog select,
html[data-theme="dark"] body > dialog select option { background: var(--kp-soft); color: var(--kp-ink); border-color: var(--kp-line); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--kp-muted); }
html[data-theme="dark"] body > dialog .dialog-close { background: var(--kp-soft); color: var(--kp-ink); }
html[data-theme="dark"] body > dialog::backdrop { background: #0009; }
html[data-theme="dark"] .kp-app .kp-desktop-create { background: var(--kp-ink); color: var(--kp-bg); }
html[data-theme="dark"] .kp-nav-item[aria-current="page"] .icon { fill: var(--kp-bg); }
html[data-theme="dark"] .kp-nav-item[data-kp-action="home"] .icon,
html[data-theme="dark"] .kp-save[aria-pressed="true"] .icon { fill: currentColor; stroke: currentColor; }
html[data-theme="dark"] :focus-visible { outline-color: #b9dfe9; }

@media (min-width: 768px) and (max-width: 850px) {
  .kp-header { gap: 8px; }
  .kp-desktop-nav button { padding-inline: 7px; }
  .kp-header .kp-icon-button { width: 36px; flex-basis: 36px; }
}