:root {
  --button: #17191d;
  --button-hover: #2a2d32;
}

html:not([data-theme="dark"]) {
  --ink: #15171a;
  --muted: #68707d;
  --line: #e7e9ed;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-soft: #f6f7f9;
  --surface: #ffffff;
  --accent: #17191d;
  --accent-strong: #2a2d32;
}

html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) .hero,
html:not([data-theme="dark"]) .intro,
html:not([data-theme="dark"]) .scene,
html:not([data-theme="dark"]) .download-center,
html:not([data-theme="dark"]) .site-footer,
html:not([data-theme="dark"]) .custom-blocks,
html:not([data-theme="dark"]) .custom-block {
  background: #ffffff;
}

html:not([data-theme="dark"]) .scene-resume,
html:not([data-theme="dark"]) .matrix,
html:not([data-theme="dark"]) .custom-block:nth-child(even) {
  background: #f6f7f9;
}

html:not([data-theme="dark"]) .site-header {
  border-bottom-color: transparent;
  background: #ffffff !important;
  box-shadow: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:not([data-theme="dark"]) .site-header.scrolled {
  border-bottom-color: #e7e9ed;
  box-shadow: 0 8px 28px rgb(35 43 55 / 7%);
}

html:not([data-theme="dark"]) .desktop-nav {
  color: #4f5661;
}

html:not([data-theme="dark"]) .header-ghost {
  border-color: #d9dde3;
  color: #15171a;
  background: #ffffff;
}

html:not([data-theme="dark"]) .header-ghost:hover {
  border-color: #bfc5ce;
  color: #15171a;
  background: #f6f7f9;
}

.header-primary,
.hero-download,
.download-center-button,
.custom-block-action:not(.cms-designed-button),
.download-resolver-actions button.primary,
.runtime-popup-button.primary,
.dialog-button.primary {
  border-color: var(--button);
  color: #ffffff;
  background: var(--button);
  box-shadow: 0 10px 24px rgb(23 25 29 / 18%);
}

.header-primary:hover,
.hero-download:hover,
.download-center-button:hover,
.custom-block-action:not(.cms-designed-button):hover,
.download-resolver-actions button.primary:hover,
.runtime-popup-button.primary:hover,
.dialog-button.primary:hover {
  border-color: var(--button-hover);
  color: #ffffff;
  background: var(--button-hover);
}

html:not([data-theme="dark"]) .hero-slide img,
html:not([data-theme="dark"]) .scene-visual img {
  filter: drop-shadow(0 24px 42px rgb(35 43 55 / 11%));
}

html:not([data-theme="dark"]) .matrix-grid,
html:not([data-theme="dark"]) .matrix-grid article {
  border-color: #dfe3e8;
}

html:not([data-theme="dark"]) .system-row > div {
  border-color: #e7e9ed;
  background: #ffffff;
}

html:not([data-theme="dark"]) .download-recommendation {
  background: #f6f7f9;
}

html:not([data-theme="dark"]) .mobile-nav {
  background: #ffffff;
  box-shadow: 0 18px 30px rgb(23 25 29 / 8%);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:not([data-theme="dark"]) body.legacy-home :where(.theme-toggle,.header-primary,.header-ghost,.hero-download,.download-center-button,.scene-index,.runtime-popup-panel,.download-resolver-panel) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 640px) {
  .mobile-download a {
    color: #15171a;
    background: #ffffff;
  }
}

html[data-theme="dark"] {
  --button: #f5f6f8;
  --button-hover: #ffffff;
}

html[data-theme="dark"] .header-primary,
html[data-theme="dark"] .hero-download,
html[data-theme="dark"] .download-center-button,
html[data-theme="dark"] .custom-block-action:not(.cms-designed-button),
html[data-theme="dark"] .download-resolver-actions button.primary,
html[data-theme="dark"] .runtime-popup-button.primary,
html[data-theme="dark"] .dialog-button.primary {
  color: #15171a;
  box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
}