/**
 * ecomhutsy.org light/dark theme
 * html[data-eh-theme="dark"] | light (default)
 */

html {
  color-scheme: light;
}

html[data-eh-theme="dark"] {
  color-scheme: dark;
}

.eh-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(15, 60, 140, 0.14);
  background: linear-gradient(160deg, #ffffff, #eef4ff);
  color: #095cff;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(24, 55, 120, 0.08), inset 0 1px 0 #fff;
}

.eh-theme-toggle svg {
  width: 18px;
  height: 18px;
}

html[data-eh-theme="dark"] body.crystal-site,
html[data-eh-theme="dark"] body {
  background: #070b14 !important;
  color: #e8eefc !important;
}

html[data-eh-theme="dark"] .site-header,
html[data-eh-theme="dark"] .site-footer,
html[data-eh-theme="dark"] .eh-corp-footer {
  background: rgba(10, 14, 24, 0.92) !important;
  border-color: rgba(120, 150, 220, 0.14) !important;
  color: #dbe5fb !important;
}

html[data-eh-theme="dark"] .site-nav a,
html[data-eh-theme="dark"] .site-brand-word,
html[data-eh-theme="dark"] h1,
html[data-eh-theme="dark"] h2,
html[data-eh-theme="dark"] h3,
html[data-eh-theme="dark"] .cc-title,
html[data-eh-theme="dark"] .solution-hero h1 {
  color: #f3f7ff !important;
}

html[data-eh-theme="dark"] p,
html[data-eh-theme="dark"] .cc-sub,
html[data-eh-theme="dark"] .muted,
html[data-eh-theme="dark"] .eh-lead {
  color: #9aa8c7 !important;
}

html[data-eh-theme="dark"] .eh-commerce,
html[data-eh-theme="dark"] .eh-per-user-hero,
html[data-eh-theme="dark"] .eh-per-user-checkout,
html[data-eh-theme="dark"] .eh-aside,
html[data-eh-theme="dark"] .eh-offer,
html[data-eh-theme="dark"] .solution-live-stage,
html[data-eh-theme="dark"] .deep-dive-metrics {
  background: linear-gradient(165deg, #121a2c, #0c1220) !important;
  border-color: rgba(120, 150, 220, 0.16) !important;
  color: #e8eefc !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35) !important;
}

html[data-eh-theme="dark"] .eh-theme-toggle {
  background: linear-gradient(160deg, #182238, #101828);
  border-color: rgba(120, 150, 220, 0.22);
  color: #8eb6ff;
  box-shadow: none;
}

html[data-eh-theme="dark"] .eh-user-stepper,
html[data-eh-theme="dark"] .eh-summary,
html[data-eh-theme="dark"] .eh-trial-timeline,
html[data-eh-theme="dark"] .eh-per-user-features .eh-feat {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(120, 150, 220, 0.14) !important;
  color: #d7e2f8 !important;
}

html[data-eh-theme="dark"] meta,
html[data-eh-theme="dark"] {
  color-scheme: dark;
}