/* Dark theme: graphite surfaces, muted eucalyptus and the existing warm orange accent. */
.theme-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  color: var(--ink);
  overflow: hidden;
  transition:
    color 0.25s,
    border-color 0.25s,
    background 0.25s,
    transform 0.25s;
}
.theme-toggle:hover {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  transform: rotate(-7deg);
}
.theme-toggle .icon {
  position: absolute;
  width: 18px;
  height: 18px;
  transition:
    opacity 0.3s,
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-icon-sun {
  opacity: 0;
  transform: rotate(-55deg) scale(0.5);
}
html[data-theme="dark"] .theme-icon-moon {
  opacity: 0;
  transform: rotate(55deg) scale(0.5);
}
html[data-theme="dark"] .theme-icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}

html.theme-changing body,
html.theme-changing .header,
html.theme-changing .hero-architecture,
html.theme-changing .quick-search,
html.theme-changing .select-trigger,
html.theme-changing .route-section,
html.theme-changing .route-map,
html.theme-changing .journey-card,
html.theme-changing .price-receipt,
html.theme-changing dialog,
html.theme-changing .cookie-notice {
  transition:
    background-color 0.38s ease,
    color 0.38s ease,
    border-color 0.38s ease;
}

html[data-theme="dark"] {
  --canvas: #0c1214;
  --white: #151f21;
  --ink: #edf0eb;
  --muted: #98a5a2;
  --line: #2a3637;
  --orange: #ef744b;
  --orange-dark: #ff8a63;
  --navy: #111b1e;
  --action: #ef744b;
  color-scheme: dark;
}
html[data-theme="dark"] body {
  background: var(--canvas);
}
html[data-theme="dark"] ::selection {
  background: #8f422d;
  color: #fff;
}
html[data-theme="dark"] .header {
  background: #0c1214f2;
  border-bottom-color: #2a3637cc;
  backdrop-filter: blur(14px);
}
html[data-theme="dark"] .brand small,
html[data-theme="dark"] .location,
html[data-theme="dark"] .desktop-nav {
  color: #a1aeaa;
}
html[data-theme="dark"] .theme-toggle {
  background: #141e20;
  border-color: #344244;
}
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .icon-button:hover {
  background: #1c292b;
}
html[data-theme="dark"] .btn-dark {
  background: #edf0eb;
  color: #101719;
}
html[data-theme="dark"] .btn-dark:hover {
  background: #fff;
}
html[data-theme="dark"] .btn-outline {
  border-color: #445153;
}
html[data-theme="dark"] .btn-outline:hover {
  background: #182325;
}
html[data-theme="dark"] .btn-white {
  background: #edf0eb;
  color: #11191b;
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .hero-architecture {
  background: radial-gradient(circle at 76% 57%, #314440 0, #1a2727 25%, #11191b 58%, #0d1416 100%);
}
html[data-theme="dark"] .hero-orbit {
  border-color: #93a99e2e;
}
html[data-theme="dark"] .hero-orbit::after {
  border-color: #93a99e1a;
}
html[data-theme="dark"] .hero-horizon {
  background: #53665e;
}
html[data-theme="dark"] .hero-wordmark {
  color: #bfd0c30a;
}
html[data-theme="dark"] .hero-image {
  filter: brightness(0.82) contrast(1.08) saturate(0.82);
}
html[data-theme="dark"] .hero-description,
html[data-theme="dark"] .hero-caption,
html[data-theme="dark"] .hero-coordinate,
html[data-theme="dark"] .hero-image-label,
html[data-theme="dark"] .hero-image-label > span {
  color: #a7b4af;
}
html[data-theme="dark"] .hero-image-label > span {
  border-left-color: #52615c;
}

html[data-theme="dark"] .search-heading .eyebrow,
html[data-theme="dark"] .search-heading > span:last-child,
html[data-theme="dark"] .service-line,
html[data-theme="dark"] .service-line .icon {
  color: #91a39a;
}
html[data-theme="dark"] .quick-search {
  background: #131d1f;
  border-color: #2a3837;
  box-shadow: 0 18px 42px #0006;
}
html[data-theme="dark"] .select-trigger {
  background: #0f1719;
  border-color: #2d3b3b;
}
html[data-theme="dark"] .select-trigger:hover,
html[data-theme="dark"] .select-trigger[aria-expanded="true"] {
  background: #182325;
  border-color: #60766c;
}
html[data-theme="dark"] .select-trigger[aria-expanded="true"] {
  box-shadow: 0 0 0 3px #6f8d7b2b;
}
html[data-theme="dark"] .select-leading {
  background: #21312d;
  color: #9fc5ae;
}
html[data-theme="dark"] .select-caption,
html[data-theme="dark"] .select-trigger > .icon {
  color: #8f9e99;
}
html[data-theme="dark"] .select-panel {
  background: #172123;
  border-color: #344244;
  box-shadow: 0 24px 60px #0009;
}
html[data-theme="dark"] .select-option {
  color: #d7ddd8;
}
html[data-theme="dark"] .select-option.active {
  background: #22302f;
}
html[data-theme="dark"] .select-option[aria-selected="true"] {
  color: #ff9a78;
}
html[data-theme="dark"] .search-submit {
  background: var(--orange);
  color: #fff;
}
html[data-theme="dark"] .search-submit:hover {
  background: #ff835d;
}

html[data-theme="dark"] #saved-count,
html[data-theme="dark"] .empty-state {
  background: #182224;
}
html[data-theme="dark"] .catalog-status,
html[data-theme="dark"] .car-specs {
  color: #8f9b98;
}
html[data-theme="dark"] .car-photo-wrap {
  background: #151f21;
  border-color: #2a3838;
}
html[data-theme="dark"] .car-badge,
html[data-theme="dark"] .save-car {
  background: #0d1516dc;
  color: #e7ece7;
  backdrop-filter: blur(8px);
}
html[data-theme="dark"] .car-open {
  border-color: #475658;
}
html[data-theme="dark"] .car-open:hover {
  background: #edf0eb;
  border-color: #edf0eb;
  color: #11191b;
}

html[data-theme="dark"] .route-section {
  background: #10181a;
}
html[data-theme="dark"] .route-tabs {
  border-color: #3a4847;
}
html[data-theme="dark"] .route-tabs button {
  color: #9ba8a4;
}
html[data-theme="dark"] .route-tabs button.active {
  background: #22302f;
  color: #f1f3ee;
}
html[data-theme="dark"] .route-fact p {
  color: #9aa7a3;
}
html[data-theme="dark"] .route-map {
  background: #111b1d;
  border-color: #2b3b3b;
}
html[data-theme="dark"] .map-svg > image {
  filter: invert(1) sepia(0.12) saturate(0.55) hue-rotate(92deg) brightness(0.67) contrast(1.08);
  opacity: 0.9;
}
html[data-theme="dark"] .map-title,
html[data-theme="dark"] .route-map[data-route="china"] .origin-china .map-city,
html[data-theme="dark"] .route-map[data-route="korea"] .origin-korea .map-city,
html[data-theme="dark"] .route-map[data-route="japan"] .origin-japan .map-city {
  color: #e7ebe6;
  fill: #e7ebe6;
}
html[data-theme="dark"] .map-city {
  fill: #a5b1ad;
}
html[data-theme="dark"] .map-route-network {
  stroke: #799388;
}
html[data-theme="dark"] .node-dot {
  fill: #70807b;
  stroke: #111b1d;
}
html[data-theme="dark"] .delivery-point .node-halo {
  fill: #9eb4aa10;
  stroke: #94a9a23a;
}
html[data-theme="dark"] .delivery-point:not(.hub-node) .node-dot {
  fill: #81968c;
}

html[data-theme="dark"] .journey-steps::before {
  background: #43544f;
}
html[data-theme="dark"] .journey-steps .journey-card,
html[data-theme="dark"] .journey-card.is-active {
  background: #151f21;
  color: var(--ink);
  border-color: #2e3b3c;
  box-shadow: none;
}
html[data-theme="dark"] .journey-card:hover,
html[data-theme="dark"] .journey-card.is-active {
  background: #1a2627;
  border-color: #4d605a;
  box-shadow: 0 18px 36px #0004;
}
html[data-theme="dark"] .step-number {
  color: #5f716a;
}
html[data-theme="dark"] .step-icon {
  stroke: #88a596;
}
html[data-theme="dark"] .step-summary,
html[data-theme="dark"] .journey-card.is-active .step-summary,
html[data-theme="dark"] .journey-steps .step-detail p {
  color: #9aa9a3;
}

html[data-theme="dark"] .price-receipt {
  background: #151f21;
  border-color: #2e3b3c;
  box-shadow: 0 18px 45px #0005;
}
html[data-theme="dark"] .price-receipt::after {
  background: #0f1719;
  border-color: #2e3b3c;
}
html[data-theme="dark"] .receipt-tag {
  background: #22302f;
}
html[data-theme="dark"] .receipt-total {
  border-color: #53635e;
}
html[data-theme="dark"] .receipt-note {
  color: #8d9995;
}
html[data-theme="dark"] .price-promises .icon {
  color: #8eae9f;
}
html[data-theme="dark"] .faq-plus::before,
html[data-theme="dark"] .faq-plus::after {
  background: #9aaaa4;
}

html[data-theme="dark"] .contact-section {
  background: #142126;
}
html[data-theme="dark"] .contact-graphic {
  color: #7b9a9020;
}
html[data-theme="dark"] .footer-column a,
html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .footer-bottom .text-button {
  color: #9aa6a2;
}

html[data-theme="dark"] dialog {
  background: #121b1d;
  color: var(--ink);
  border: 1px solid #2f3d3e;
  box-shadow: 0 35px 110px #000b;
}
html[data-theme="dark"] dialog::backdrop {
  background: #05090bcc;
}
html[data-theme="dark"] .dialog-close {
  background: #172123ee;
}
html[data-theme="dark"] #contact-form input:not([type="radio"]) {
  background: #0c1416;
  border-color: #3b4a49;
  color: var(--ink);
}
html[data-theme="dark"] .channel-choice span {
  border-color: #465454;
}
html[data-theme="dark"] .channel-choice input:checked + span {
  background: #edf0eb;
  border-color: #edf0eb;
  color: #11191b;
}
html[data-theme="dark"] .success-mark {
  background: #20332b;
  color: #a3c8b2;
}
html[data-theme="dark"] .detail-photo {
  background: #172224;
}
html[data-theme="dark"] .photo-hint {
  color: #a8b7b1;
}
html[data-theme="dark"] .toast {
  background: #edf0eb;
  color: #11191b;
}
html[data-theme="dark"] .cookie-notice {
  background: #172123;
  border-color: #344243;
  box-shadow: 0 20px 55px #0009;
}
html[data-theme="dark"] .cookie-notice p {
  color: #a7b3af;
}
html[data-theme="dark"] .cookie-notice button {
  background: #edf0eb;
  color: #11191b;
}
html[data-theme="dark"] .mobile-menu:not([hidden]),
html[data-theme="dark"] .mobile-contact-bar {
  background: #0e1618f7;
  border-color: #2d3a3b;
  box-shadow: 0 20px 35px #0006;
}

@media (max-width: 760px) {
  .theme-toggle {
    width: 36px;
    height: 36px;
  }
  .theme-toggle .icon {
    width: 16px;
    height: 16px;
  }
  html[data-theme="dark"] .hero,
  html[data-theme="dark"] .hero-architecture {
    background: radial-gradient(circle at 66% 75%, #2b403b 0, #172224 31%, #0d1416 70%);
  }
}

@media (max-width: 520px) {
  .header .location {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle .icon,
  html.theme-changing body,
  html.theme-changing .header,
  html.theme-changing .hero-architecture,
  html.theme-changing .quick-search,
  html.theme-changing .select-trigger,
  html.theme-changing .route-section,
  html.theme-changing .route-map,
  html.theme-changing .journey-card,
  html.theme-changing .price-receipt,
  html.theme-changing dialog,
  html.theme-changing .cookie-notice {
    transition: none;
  }
}