:root {
  color-scheme: light;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  flex: 0 0 28px;
  border: 1px solid rgba(0, 0, 0, 0.38);
  border-radius: 50%;
  background: transparent;
  color: rgba(0, 0, 0, 0.82);
  font-family: Arial, sans-serif;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: #000;
  border-color: rgba(0, 0, 0, 0.78);
  background-color: rgba(0, 0, 0, 0.06);
}

.theme-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media screen {
  html.theme-dark {
    color-scheme: dark;
    --color-black: #f2f3f4;
    --color-white: #141618;
    --theme-bg: #111315;
    --theme-surface: #191c1f;
    --theme-surface-2: #22262a;
    --theme-text: rgba(255, 255, 255, 0.9);
    --theme-muted: rgba(255, 255, 255, 0.66);
    --theme-border: rgba(255, 255, 255, 0.16);
  }

  html.theme-dark,
  html.theme-dark body {
    background: var(--theme-bg) !important;
    color: var(--theme-text) !important;
  }

  html.theme-dark :where(main, article, section) {
    background-color: transparent !important;
  }

  html.theme-dark :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, label, legend, summary, th, td, strong, b) {
    color: var(--theme-text) !important;
  }

  html.theme-dark :where(span, small, em, i, time, address, figcaption) {
    color: inherit !important;
  }

  html.theme-dark :where(a, button) {
    color: var(--theme-text) !important;
  }

  html.theme-dark .theme-toggle {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.48) !important;
    color: var(--theme-text) !important;
  }

  html.theme-dark .theme-toggle:hover,
  html.theme-dark .theme-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.86) !important;
  }

  html.theme-dark :where(
    [class*="subtitle"], [class*="description"], [class*="caption"],
    [class*="hint"], [class*="muted"], [class*="meta"], [class*="date"],
    [class*="breadcrumbs"], .form-consent, .breadcrumb__list
  ) {
    color: var(--theme-muted) !important;
  }

  html.theme-dark :where(
    .features__text, .metrics__value, .metrics__unit, .metrics__text,
    .each-service__label, .project-hero__detail, .projects-card__meta,
    .step-item__number, .pc-breadcrumb ol, .ec-breadcrumb ol, .el-breadcrumb ol
  ) {
    color: var(--theme-text) !important;
  }

  html.theme-dark :where(li)::before,
  html.theme-dark :where(li)::marker {
    color: var(--theme-muted) !important;
  }

  html.theme-dark :where(.header, .header__nav--open, .header__contacts--open, .footer, .breadcrumb, .pc-breadcrumb, .ec-breadcrumb, .el-breadcrumb, .el-local-nav) {
    background-color: #141618 !important;
  }

  html.theme-dark .el-local-nav__links a {
    color: var(--theme-text) !important;
  }

  html.theme-dark :where(
    .trust-card, .catalog-card, .price-card, .news-card,
    .service-card, .project-card, .metric-card, .metrics__card,
    .highlight-box, .comparison-box, .article__cta-box,
    .popup__content, .modal__content, [class*="modal-content"], [class*="modal-box"],
    .faq-page__item, .el-service, .el-about__content,
    .case-block, .cta-table, .example-block__content--light,
    .project-hero__detail, .safety-block, .warning-box,
    .el-bim, .el-bim__image, .el-form
  ) {
    background-color: var(--theme-surface) !important;
    border-color: var(--theme-border) !important;
  }

  html.theme-dark :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea, select
  ) {
    background-color: var(--theme-surface-2) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: var(--theme-text) !important;
  }

  html.theme-dark :where(input, textarea)::placeholder {
    color: rgba(255, 255, 255, 0.48) !important;
  }

  html.theme-dark :where(
    .consultation__button, .consultation__button--secondary,
    .newsletter__button, .consultation-form__button,
    .service-card__btn, .hero__button, .slider-prev, .slider-next
  ) {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
    color: var(--theme-text) !important;
  }

  html.theme-dark :where(
    .consultation__button, .consultation__button--secondary,
    .newsletter__button, .consultation-form__button,
    .service-card__btn, .hero__button, .slider-prev, .slider-next
  ):hover {
    background-color: #f0f1f2 !important;
    border-color: #f0f1f2 !important;
    color: #101214 !important;
  }

  html.theme-dark :where(
    .header__logo-img, .header__icon, .header__burger-icon,
    .footer__logo, .footer__icons img
  ) {
    filter: brightness(0) invert(1) !important;
  }

  html.theme-dark :where(
    .footer__brand-text, .footer__copyright, .footer__column-title,
    .footer__list a, .footer__contacts a, .footer__contacts span
  ) {
    color: var(--theme-text) !important;
  }

  html.theme-dark :where(.footer__brand-text, .footer__copyright) {
    opacity: 1 !important;
  }

  html.theme-dark :where(.popup__window, .popup__content) {
    background: var(--theme-surface) !important;
    color: var(--theme-text) !important;
  }

  html.theme-dark :where(.trust-card__logo img) {
    filter: brightness(0) invert(1);
  }

  html.theme-dark :where(
    .footer__divider, .why__divider, .faq__divider, .divider,
    .slider-dot, .features__container::before,
    .why-header__container::before, .metrics__container::before
  ) {
    background-color: var(--theme-border) !important;
  }

  html.theme-dark :where(
    .features__marker, .slider-dot.active,
    .bz-progress div.active, .pc-progress .active, .ec-progress .active,
    .bz-header-mark, .pc-kicker::before, .ec-kicker::before
  ) {
    background-color: #f0f1f2 !important;
  }

  html.theme-dark :where(.news__link, .youtube-link) {
    border-color: rgba(255, 255, 255, 0.42) !important;
  }

  html.theme-dark :where([class*="error"]) {
    color: #ff8f8f !important;
  }

  html.theme-dark :where([class*="success"]) {
    color: #7fe0a6 !important;
  }

  html.theme-dark svg {
    color: var(--theme-text);
  }

  html.theme-dark svg :where([stroke="#000"], [stroke="#000000"], [stroke="black"]) {
    stroke: currentColor !important;
  }

  html.theme-dark svg :where([fill="#000"], [fill="#000000"], [fill="black"]) {
    fill: currentColor !important;
  }

  html.theme-dark :where(
    .project-card, .example-row, .benefit-item, .price-section,
    .form-section, .breadcrumb, .article__intro,
    .article-table th, .article-table td, hr
  ) {
    border-color: var(--theme-border) !important;
  }

  html.theme-dark :where(.article-table th, .news__select, .each-service__label) {
    background-color: var(--theme-surface-2) !important;
  }

  html.theme-dark img:not(.header__logo-img):not(.header__icon):not(.header__burger-icon):not(.footer__logo) {
    filter: brightness(0.9);
  }

  html.theme-dark #bz-calc-root {
    --bz-bg: var(--theme-bg);
    --bz-bg-card: var(--theme-surface);
    --bz-fg: #f2f3f4;
    --bz-fg-mute: rgba(255, 255, 255, 0.64);
    --bz-accent: #ffffff;
    --bz-line: rgba(255, 255, 255, 0.14);
    --bz-line-d: rgba(255, 255, 255, 0.28);
  }

  html.theme-dark #bz-calc-root :where(
    input[type="number"], input[type="text"], input[type="tel"],
    .bz-toggle, .bz-toggle button, .bz-btn-ghost,
    .bz-pkg, .bz-modal-content, .bz-summary
  ) {
    background: var(--theme-surface-2) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
  }

  html.theme-dark #bz-calc-root :where(.bz-btn-primary, .bz-toggle button.active) {
    background: #f0f1f2 !important;
    color: #101214 !important;
    border-color: #f0f1f2 !important;
  }

  html.theme-dark #bz-calc-root :where(.bz-section-cell.recommend, .bz-section-cell.label, .bz-alert) {
    background: rgba(255, 255, 255, 0.06) !important;
  }

  html.theme-dark #pc-root {
    --pc-bg: var(--theme-bg);
    --pc-card: var(--theme-surface);
    --pc-fg: #f2f3f4;
    --pc-muted: rgba(255, 255, 255, 0.64);
    --pc-line: rgba(255, 255, 255, 0.15);
  }

  html.theme-dark #ec-root {
    --e-bg: var(--theme-bg);
    --e-card: var(--theme-surface);
    --e-fg: #f2f3f4;
    --e-muted: rgba(255, 255, 255, 0.64);
    --e-line: rgba(255, 255, 255, 0.15);
  }

  html.theme-dark :where(#pc-root, #ec-root) :where(
    input, .pc-choice, .pc-choice button, .pc-check,
    .pc-tag, .pc-notice, .pc-result-side, .pc-reason, .pc-modal-box,
    .ec-choice, .ec-choice button, .ec-check, .ec-tag,
    .ec-notice, .ec-result-side, .ec-reason, .ec-modal-box
  ) {
    background: var(--theme-surface-2) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
  }

  html.theme-dark :where(#pc-root, #ec-root) :where(
    .pc-summary, .ec-summary, .pc-btn-dark, .ec-btn-dark,
    .pc-choice button.active, .ec-choice button.active
  ) {
    background: #080a0c !important;
    color: #ffffff !important;
  }

  html.theme-dark #el-page {
    --el-black: #080a0c;
    --el-gray: var(--theme-surface);
    --el-line: rgba(255, 255, 255, 0.16);
    --el-muted: rgba(255, 255, 255, 0.64);
    color: var(--theme-text) !important;
    background: var(--theme-bg) !important;
  }

  html.theme-dark #el-page :where(.el-service, .el-local-nav) {
    background: var(--theme-surface) !important;
  }

  html.theme-dark #el-page :where(.el-section--gray, .el-about__content) {
    background: var(--theme-surface) !important;
  }

  /* Decorative markers must stay transparent instead of becoming square cards. */
  html.theme-dark .features__marker {
    background-color: transparent !important;
    filter: invert(1) brightness(1.15) !important;
  }

  /* Metrics use the page background in both themes. */
  html.theme-dark :where(
    .metric-card, .metrics__card,
    .project-card, .news-card, .service-card, .faq-page__item
  ) {
    background-color: transparent !important;
    box-shadow: none !important;
  }

  html.theme-dark :where(.metric-card, .metrics__card) {
    border-color: transparent !important;
  }

  /* The step numbers and connecting line are a transparent PNG. */
  html.theme-dark .steps__image {
    filter: invert(1) brightness(.82) !important;
  }

  /* Trust-slider copy is built from divs, so it needs explicit dark-theme colors. */
  html.theme-dark :where(
    .trust-card__company,
    .trust-card__text,
    .trust-card__link
  ) {
    color: var(--theme-text) !important;
  }

  html.theme-dark .trust-card__service {
    color: var(--theme-muted) !important;
  }

  /* Price values are div/span elements and do not inherit the generic text rule. */
  html.theme-dark .price-card__price {
    color: var(--theme-text) !important;
  }

  html.theme-dark .price-card__price-unit {
    color: var(--theme-muted) !important;
  }

  /* Project facts use spans with their own light-theme colors. */
  html.theme-dark .project-hero__info-label {
    color: var(--theme-text) !important;
  }

  html.theme-dark .project-hero__info-value {
    color: var(--theme-muted) !important;
  }

  html.theme-dark .project-hero__info {
    border-color: var(--theme-border) !important;
  }
}