/* RoboXHub shared light/dark theme layer.
 * Loaded last so current and future WordPress/Docusaurus content inherits the
 * same semantic surfaces instead of requiring page-specific dark-mode patches.
 */
:root {
  --rxh-theme-canvas: #f7f8fa;
  --rxh-theme-surface: #ffffff;
  --rxh-theme-surface-raised: #ffffff;
  --rxh-theme-surface-muted: #f1f3f5;
  --rxh-theme-text: #1b1d21;
  --rxh-theme-text-soft: #5f6670;
  --rxh-theme-text-faint: #7a828d;
  --rxh-theme-border: #e1e5ea;
  --rxh-theme-border-strong: #cdd3da;
  --rxh-theme-primary: #1767d6;
  --rxh-theme-primary-soft: #eaf2ff;
  --rxh-theme-code: #f2f3f5;
  --rxh-theme-shadow: 0 12px 32px rgba(20, 27, 38, 0.07);
  --bg: var(--rxh-theme-canvas);
  --surface: var(--rxh-theme-surface);
  --surface-2: var(--rxh-theme-surface-muted);
  --ink: var(--rxh-theme-text);
  --ink-2: var(--rxh-theme-text);
  --muted: var(--rxh-theme-text-soft);
  --line: var(--rxh-theme-border);
  --rxh-ui-text-color: var(--rxh-theme-text);
  --rxh-ui-muted-color: var(--rxh-theme-text-soft);
  --rxh-ui-background-color: var(--rxh-theme-canvas);
  --rxh-ui-surface-color: var(--rxh-theme-surface);
  --rxh-ink: var(--rxh-theme-text);
  --rxh-muted: var(--rxh-theme-text-soft);
  --rxh-line: var(--rxh-theme-border);
  --rxh-soft: var(--rxh-theme-surface-muted);
}

html[data-theme="dark"],
html.rxh-theme-black,
body.theme-black {
  --rxh-theme-canvas: #18191b;
  --rxh-theme-surface: #1d1f21;
  --rxh-theme-surface-raised: #222426;
  --rxh-theme-surface-muted: #26282b;
  --rxh-theme-text: #f1f2f4;
  --rxh-theme-text-soft: #c5c9cf;
  --rxh-theme-text-faint: #9da3ab;
  --rxh-theme-border: #35383c;
  --rxh-theme-border-strong: #484c51;
  --rxh-theme-primary: #75aaff;
  --rxh-theme-primary-soft: #25364f;
  --rxh-theme-code: #25272a;
  --rxh-theme-shadow: none;
  --bg: var(--rxh-theme-canvas);
  --surface: var(--rxh-theme-surface);
  --surface-2: var(--rxh-theme-surface-muted);
  --ink: var(--rxh-theme-text);
  --ink-2: var(--rxh-theme-text);
  --muted: var(--rxh-theme-text-soft);
  --line: var(--rxh-theme-border);
  --rxh-ui-text-color: var(--rxh-theme-text);
  --rxh-ui-muted-color: var(--rxh-theme-text-soft);
  --rxh-ui-background-color: var(--rxh-theme-canvas);
  --rxh-ui-surface-color: var(--rxh-theme-surface);
  --rxh-ink: var(--rxh-theme-text);
  --rxh-muted: var(--rxh-theme-text-soft);
  --rxh-line: var(--rxh-theme-border);
  --rxh-soft: var(--rxh-theme-surface-muted);
  color-scheme: dark;
}

html,
body,
.main-wrapper,
main {
  background-color: var(--rxh-theme-canvas);
  color: var(--rxh-theme-text);
}

body,
.main-wrapper,
main,
article,
section,
aside,
nav,
header,
footer,
input,
select,
textarea,
button {
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

:where(.theme-doc-markdown, .wiki-doc-article, .project-detail-prototype, .rxh-content-surface) {
  color: var(--rxh-theme-text);
}

:where(.theme-doc-markdown, .wiki-doc-article, .project-detail-prototype, .rxh-content-surface)
  :where(p, li, dd, figcaption) {
  color: var(--rxh-theme-text-soft);
}

:where(.theme-doc-markdown, .wiki-doc-article, .project-detail-prototype, .rxh-content-surface)
  :where(h1, h2, h3, h4, h5, h6, strong, dt) {
  color: var(--rxh-theme-text);
}

:where(.theme-doc-markdown, .wiki-doc-article, .project-detail-prototype, .rxh-content-surface) a {
  color: var(--rxh-theme-primary);
}

body.theme-black :where(
  .wiki-doc-sidebar,
  .wiki-doc-toc,
  .theme-doc-sidebar-container,
  .table-of-contents,
  .wiki-prototype-section,
  .project-detail-prototype > section,
  .project-detail-prototype article,
  [class*="-card"],
  [class*="_card"]
) {
  border-color: var(--rxh-theme-border);
  background-color: var(--rxh-theme-surface);
  color: var(--rxh-theme-text);
  box-shadow: var(--rxh-theme-shadow);
}

body.theme-black :where(main, .main-wrapper, .wiki-prototype-page, .project-detail-prototype) :where(h1, h2, h3, h4, h5, h6, strong, dt) {
  color: var(--rxh-theme-text) !important;
}

body.theme-black :where(main, .main-wrapper, .wiki-prototype-page, .project-detail-prototype) :where(p, li, dd, figcaption) {
  color: var(--rxh-theme-text-soft) !important;
}

/* Win over legacy document rules that still declare fixed colours with !important. */
body.theme-black .wiki-prototype-page p:not(.wiki-doc-claim-en),
body.theme-black .wiki-prototype-page :is(li, dd, figcaption),
body.theme-black .project-detail-prototype :is(p, li, dd, figcaption) {
  color: var(--rxh-theme-text-soft) !important;
}

body.theme-black .wiki-prototype-page .wiki-doc-claim-en,
body.theme-black .wiki-prototype-page :is([aria-current="page"], .is-current, .is-active) {
  color: var(--rxh-theme-primary) !important;
}

body.theme-black .wiki-doc-breadcrumb {
  background: var(--rxh-theme-canvas) !important;
  border-color: var(--rxh-theme-border) !important;
}

body.theme-black .wiki-doc-breadcrumb strong {
  background: var(--rxh-theme-surface-muted) !important;
  color: var(--rxh-theme-primary) !important;
}

body.theme-black .wiki-doc-breadcrumb :is(a, span) {
  color: var(--rxh-theme-text-soft) !important;
}

body.theme-black :where(main, .main-wrapper, .wiki-prototype-page, .project-detail-prototype) :where(a, [class*="eyebrow"], [class*="kicker"], [class*="tag"]) {
  color: var(--rxh-theme-primary);
}

body.theme-black :where(.wiki-brand-tree-trigger, .wiki-brand-tree-trigger .icon) {
  color: var(--rxh-theme-text-soft) !important;
}

body.theme-black .wiki-prototype-page--brand-tree .wiki-brand-tree-trigger:hover {
  background: var(--rxh-theme-surface-muted) !important;
  color: var(--rxh-theme-primary) !important;
}

body.theme-black :where(
  .wiki-doc-sidebar,
  .wiki-doc-toc,
  .theme-doc-sidebar-container,
  .table-of-contents
) :where(a, span, small) {
  color: var(--rxh-theme-text-soft);
}

body.theme-black :where(
  .wiki-doc-sidebar,
  .wiki-doc-toc,
  .theme-doc-sidebar-container,
  .table-of-contents
) :where(a:hover, a.is-active, a[aria-current="page"], .table-of-contents__link--active) {
  color: var(--rxh-theme-primary);
}

body.theme-black :where(input, textarea, select) {
  border-color: var(--rxh-theme-border-strong);
  background: var(--rxh-theme-surface-muted);
  color: var(--rxh-theme-text);
}

body.theme-black :where(input, textarea)::placeholder {
  color: var(--rxh-theme-text-faint);
}

body.theme-black :where(table, th, td, hr, blockquote) {
  border-color: var(--rxh-theme-border);
}

body.theme-black :where(pre, code, .rxh-code-block, .prism-code) {
  border-color: var(--rxh-theme-border);
  background-color: var(--rxh-theme-code);
  color: var(--rxh-theme-text);
}

body.theme-black img {
  color-scheme: normal;
}

.rxh-theme-control,
[data-theme-toggle],
[data-rxh-theme] {
  position: relative;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  display: inline-grid !important;
  place-items: center;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: currentColor;
  cursor: pointer;
  box-shadow: none !important;
}

.rxh-theme-control:hover,
[data-theme-toggle]:hover,
[data-rxh-theme]:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transform: none !important;
}

.rxh-theme-control:focus-visible,
[data-theme-toggle]:focus-visible,
[data-rxh-theme]:focus-visible {
  outline: 3px solid rgba(79, 145, 255, 0.45);
  outline-offset: 2px;
}

.rxh-theme-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}

.rxh-theme-icon svg {
  grid-area: 1 / 1;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rxh-theme-moon,
body.theme-black .rxh-theme-sun,
html[data-theme="dark"] .rxh-theme-sun {
  display: none;
}

body.theme-black .rxh-theme-moon,
html[data-theme="dark"] .rxh-theme-moon {
  display: block;
}

.theme-toggle-track,
.rxh-docs-theme-track,
.rxh-theme-label,
[data-theme-label] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  body,
  .main-wrapper,
  main,
  article,
  section,
  aside,
  nav,
  header,
  footer,
  input,
  select,
  textarea,
  button {
    transition: none !important;
  }
}