/* Keep the original Dormy palette untouched until another accent is selected. */
html[data-accent-theme]:not([data-accent-theme="red"]) body.product-active {
  --brand: var(--theme-brand);
  --brand-strong: var(--theme-strong);
  --brand-soft: var(--theme-soft);
  --accent: var(--theme-brand);
  --surface-2: var(--theme-soft);
  --line: var(--theme-line);
  --public-nav-bg: var(--theme-brand);
}

/* These older components have literal red accents instead of shared tokens. */
html[data-accent-theme]:not([data-accent-theme="red"]) body.product-active .topbar {
  background: var(--brand);
  border-color: var(--brand);
}
html[data-accent-theme]:not([data-accent-theme="red"]) body.product-active :is(.nav-link:hover,.nav-link.active,.connect-section-tabs button[aria-current="page"],.mention-option:hover,.mention-option[aria-selected="true"],.emoji-shortcode-option:hover,.emoji-shortcode-option[aria-selected="true"],.conversation-row:hover,.conversation-row.active) {
  background: var(--brand-soft);
}
html[data-accent-theme]:not([data-accent-theme="red"]) body.product-active .nav-link.active .nav-count {
  background: var(--theme-line);
  color: var(--brand-strong);
}
html[data-accent-theme]:not([data-accent-theme="red"]) body.product-active :is(.post-topic,.profile-other-campus-context,.people-grid .person-interests span,.people-grid .person-details .follows-you,.grouped-section-tabs button:hover:not([aria-current="page"])) {
  background: var(--brand-soft);
  border-color: var(--line);
  color: var(--brand-strong);
}
html[data-accent-theme]:not([data-accent-theme="red"]) body.product-active :is(.home-person-follow,.people-grid .person-identity .follow-button,.people-grid .person-card:hover) {
  border-color: var(--line);
}
html[data-accent-theme]:not([data-accent-theme="red"]) body.product-active :is(.people-grid .person-identity .follow-button:hover,.people-grid .person-actions .button.primary:hover) {
  background: var(--brand-soft);
  border-color: var(--brand);
}
html[data-accent-theme]:not([data-accent-theme="red"]) body.product-active .profile-page .profile-handle-line .verified-label {
  color: var(--brand);
}
html[data-accent-theme]:not([data-accent-theme="red"]) body.product-active :is(.home-page #post-body:focus,.account-username-control:focus-within,.messages-page .message-search:focus-within,.messages-page #message-form .message-compose-row textarea[name="message"]:focus,.messages-page #message-form .message-compose-row textarea[name="message"]:focus-visible) {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--theme-rgb),.16);
}
html[data-accent-theme]:not([data-accent-theme="red"]) body.product-active .messages-page .conversation-row.active {
  box-shadow: inset 3px 0 var(--brand),0 4px 14px rgba(var(--theme-rgb),.08);
}
html[data-accent-theme]:not([data-accent-theme="red"]) body.product-active .messages-page .message-bubble.mine:not(:has(>.message-image)):not(.editing) {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 13px rgba(var(--theme-rgb),.17);
}
html[data-accent-theme]:not([data-accent-theme="red"]) body.product-active .messages-page #message-form .message-send {
  box-shadow: 0 4px 12px rgba(var(--theme-rgb),.18);
}
html[data-accent-theme]:not([data-accent-theme="red"]) body.product-active .messages-page .message-thread {
  background: linear-gradient(180deg,var(--brand-soft),var(--surface));
  scrollbar-color: var(--line) transparent;
}

.account-controls .account-theme-setting {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.theme-color-options {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}
.theme-color-option {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 52px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease,border-color 150ms ease;
}
.theme-color-option:hover { background: var(--surface-2); }
.theme-color-option[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.theme-color-option:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.theme-color-swatch { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--swatch-color); color: #fff; }
.theme-color-swatch svg { width: 18px; height: 18px; visibility: hidden; }
.theme-color-option[aria-pressed="true"] .theme-color-swatch svg { visibility: visible; }
.account-controls p.theme-color-status { margin: 12px 0 0; font-size: .73rem; }
@media(max-width:560px) {
  .theme-color-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .account-controls .account-theme-setting { padding: 14px; }
}
@media(prefers-reduced-motion:reduce) {
  .theme-color-option { transition: none; }
}