/* Shared tokens also own every legacy list, article and shop surface. */
:root[data-palette] {
  --button-bg: #d6d9e2; --button-ink: #15171c; --hover: #ffffff0e;
  --hero-ink: #f3f3f7; --hero-muted: #d2d4dd; --hero-shadow: 0 2px 9px #000, 0 0 20px #000;
  --portrait: url('portraits.webp'); --focus: #b9e4d5; --scrim: #000b;
  --cover-art: url('/media/black-silver/emerald-cover.webp');
}
:root[data-palette="pink"] {
  color-scheme: light;
  --bg: #fff7f9; --surface: #fffdfd; --surface-2: #f8eaf0; --raise: #fff;
  --ink: #502c3b; --muted: #795c69; --line: #ddc4cf;
  --accent: #a34c6e; --accent-ink: #8d3658; --accent-soft: #f6dee8;
  --mint: #316d5c; --mint-soft: #e2f1e9; --butter: #8b682b; --butter-soft: #faf0db;
  --sky: #376c91; --sky-soft: #e6f0f9; --lav: #705784; --lav-soft: #eee6f4;
  --red: #a43557; --red-soft: #f9e0e8;
  --button-bg: #934360; --button-ink: #fff; --hover: #a34c6e0b;
  --hero-ink: #61223e; --hero-muted: #6a3b50; --hero-shadow: 0 1px 3px #fff, 0 0 18px #fff9;
  --portrait: url('portraits-pink.webp'); --focus: #8d3658; --scrim: #30202ac4;
  --cover-art: url('/media/black-silver/cover-pink.webp');
  --shadow: 0 12px 36px #5b33431c; --shadow-sm: none;
}
:root[data-palette="blue"] {
  color-scheme: light;
  --bg: #f5faff; --surface: #fcfeff; --surface-2: #e8f1fa; --raise: #fff;
  --ink: #203b58; --muted: #526b84; --line: #bfd1e2;
  --accent: #3c72a8; --accent-ink: #285b8f; --accent-soft: #deebf8;
  --mint: #2f705e; --mint-soft: #e1f1eb; --butter: #876129; --butter-soft: #f8eedb;
  --sky: #296f9d; --sky-soft: #e1f0fa; --lav: #6a5a89; --lav-soft: #ede8f6;
  --red: #9b3853; --red-soft: #f8e2e8;
  --button-bg: #2d6195; --button-ink: #fff; --hover: #3c72a80b;
  --hero-ink: #183f70; --hero-muted: #345675; --hero-shadow: 0 1px 3px #fff, 0 0 18px #fff9;
  --portrait: url('portraits-blue.webp'); --focus: #285b8f; --scrim: #192c42c4;
  --cover-art: url('/media/black-silver/cover-blue.webp');
  --shadow: 0 12px 36px #25486a1c; --shadow-sm: none;
}
:focus-visible {outline-color: var(--focus);}
.black-home *, .black-top *, footer * {border-color: var(--line);}
.black-nav, .black-nav a, .notice-item, .primary-links, .primary-entry,
.resource-heading, .resource-row, .service-section, .service-grid > a, .help-grid > a,
.contact-section, .social-group, .xhs-accounts a + a, .about-entry, .home-cover {border-color: var(--line);}
header.black-top {background: color-mix(in srgb,var(--surface) 95%,transparent); border-color: var(--line); box-shadow: none;}
.black-top .brand b, .black-top .logo, .black-nav a, .notice-item, .home-article,
.primary-entry, .service-grid > a, .help-grid > a, .selected-link, .social-group,
.platform-symbol, .about-entry {color: var(--ink);}
.black-top .brand small, .notice-item time, .notice-item p, .band-title > a, .ann-toggle,
.primary-entry small, .home-article time, .home-empty, .section-heading > a,
.social-group small, .social-action, .service-grid > a::after, .help-grid > a::after {color: var(--muted);}
.black-home a:hover, .black-nav a:hover, .help-grid > a:hover {color: var(--accent-ink);}
.icon-button:hover, .site-menu a:hover, .service-grid > a:hover, .help-grid > a:hover,
.about-entry:hover, .social-group:hover {background: var(--hover);}
.site-menu, .palette-menu {background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink);}
.black-hero {background: var(--surface-2);}
.hero-copy {color: var(--hero-ink); text-shadow: var(--hero-shadow);}
.hero-copy #s-herotitle, .hero-copy #s-herosub {color: var(--hero-muted);}
.primary-entry, .social-group {background: var(--surface);}
.primary-entry:hover {background: var(--surface-2); border-color: var(--accent);}
.resource-row {background: var(--surface);}
.category-art {background-image: var(--portrait);}
.category-art h2 {color: var(--ink); text-shadow: none;}
.category-art a {color: var(--muted);}
.home-cover {background: var(--surface-2);}
.home-article:hover .home-cover {border-color: var(--accent);}
.platform-symbol.xhs {color: var(--accent-ink);}
footer {background: var(--surface); color: var(--muted); border-color: var(--line);}
#siteToast {background: var(--button-bg); color: var(--button-ink); box-shadow: var(--shadow);}
#siteSearch {background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow);}
#siteSearch::backdrop, .modal {background: var(--scrim);}
.search-field {border-color: var(--line);}
.search-field input, .search-result {color: var(--ink);}
.search-field:focus-within {outline: 2px solid var(--focus); outline-offset: 2px;}
.search-field input::placeholder {color: var(--muted); opacity: 1;}
.search-result {border-color: var(--line);}
.search-result small {color: var(--muted);}
.search-result:hover {background: var(--hover);}
.palette-menu {position: absolute; right: max(16px,calc((100% - 1256px) / 2)); top: calc(100% + 6px); width: 288px; max-width: calc(100% - 32px); padding: 14px; border-radius: 6px; z-index: 5;}
.palette-label {font-size: 12px; color: var(--muted);}
.palette-options {display: flex; justify-content: space-between; gap: 8px; margin-top: 8px;}
.palette-option {display: flex; flex-direction: column; align-items: center; gap: 7px; width: 58px; min-height: 60px; padding: 4px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px;}
.palette-swatch {display: block; width: 30px; height: 30px; border: 1px solid #83838c; border-radius: 50%; outline-offset: 3px;}
.swatch-black {background: #24252c;}
.swatch-classic {background: linear-gradient(135deg,#ffe1ea 50%,#dbf3e9 50%);}
.swatch-pink {background: #edb9ce;}
.swatch-blue {background: #aecfee;}
.palette-option[aria-pressed="true"] {color: var(--ink); font-weight: 700;}
.palette-option[aria-pressed="true"] .palette-swatch {outline: 2px solid var(--accent-ink);}
.palette-option:hover .palette-swatch {box-shadow: 0 0 0 4px var(--accent-soft);}
/* CMS type scale and layout stay intact; palette-specific colors are inherited. */
.artModal, #artModal {background: var(--bg);}
.asheet, .lsheet, .modal .box {background: var(--surface); border-radius: 6px; box-shadow: var(--shadow);}
.artModal *, .modal * {letter-spacing: 0;}
.ann, .tut, .hcard, .lgc, .tcard, .beauty-card {
  background: var(--surface); border-color: var(--line); border-radius: 6px; box-shadow: none;
}
.ann:hover, .tut:hover, .hcard:hover, .lgc:hover, .tcard:hover {border-color: var(--accent); box-shadow: var(--shadow);}
.ann.top {background: var(--surface); border-color: var(--accent);}
.rich-content[class*="content-theme-"] {color: var(--ink); background: var(--surface-2); border-color: var(--line); border-radius: 6px; box-shadow: none;}
.rich-content.content-theme-default {background: transparent;}
.rich-content blockquote {background: var(--accent-soft); border-radius: 0 6px 6px 0;}
.pill {box-shadow: none;}
.p-note {color: var(--butter);}
.p-top {background: var(--red); color: #fff;}
.tut .lv {background: var(--surface); color: var(--ink); border: 1px solid var(--line);}
.dlbtn, .dlbtn.mod, .modal .mclose, .beauty-download,
.htb .chip.on {background: var(--button-bg); color: var(--button-ink); border-color: var(--button-bg); border-radius: 6px; box-shadow: none;}
.dlbtn.alt, .beauty-preview {background: var(--accent-soft); color: var(--accent-ink); border-color: var(--line);}
.modal .tbi {border-radius: 6px;}
.modal .tbi .tg {background: var(--accent-soft); color: var(--accent-ink); border-radius: 4px;}
.aback, .htb .search, .htb select, .htb .chip, .beauty-filters .chip {border-radius: 6px;}
.modal .box {max-height: calc(100dvh - 40px); overflow: auto;}
.modal .tbi-main > span:last-child {overflow-wrap: anywhere;}
.beauty-download:hover, .dlbtn:hover {filter: brightness(.96);}
@media (min-width: 701px) {.primary-entry {background: transparent;}}
@media (max-width: 700px) {
  #artModal .asheet {background: var(--surface);}
  #artModal .abar {box-shadow: none;}
  #artModal .ahero {border-radius: 0; margin: 0;}
  #artModal .apad {background: var(--surface); margin: 0; padding: 20px 16px 28px; border: 0; border-radius: 0; box-shadow: none;}
  #artModal .abody blockquote {border-radius: 0 6px 6px 0;}
  #artModal .mobile-template-journal {background: var(--surface);}
  .palette-menu {top: 60px;}
  .header-tools {gap: 0;}
  .header-tools .icon-button {width: 36px;}
}
@media (max-width: 360px) {
  .black-top .brand b {font-size: 16px;}
  .black-top .brand small {font-size: 8px;}
  .black-top .logo {width: 24px;}
  .black-top .brand {gap: 5px;}
  .header-tools .icon-button {width: 32px;}
}