:root {
  color-scheme: light;
  --theme-bg: #f4f5ef;
  --theme-surface: #fff;
  --theme-surface-raised: #e9ede4;
  --theme-text: #101417;
  --theme-muted: #69716c;
  --theme-copy: #3f4943;
  --theme-border: #d9ddd2;
  --theme-border-strong: #cbd1c7;
  --theme-focus: #101417;
  --theme-shadow: rgba(16,20,23,.12);
}

html[data-theme='dark'] {
  color-scheme: dark;
  --ink: #f4f5ef;
  --paper: #101417;
  --muted: #aab3ab;
  --line: #303a34;
  --white: #f4f5ef;
  --theme-bg: #101417;
  --theme-surface: #18201d;
  --theme-surface-raised: #202a25;
  --theme-text: #f4f5ef;
  --theme-muted: #aab3ab;
  --theme-copy: #c8d0ca;
  --theme-border: #303a34;
  --theme-border-strong: #46534b;
  --theme-focus: #d8ff3e;
  --theme-shadow: rgba(0,0,0,.35);
}

html[data-theme='dark'] body {
  background: var(--theme-bg);
  color: var(--theme-text);
}

html[data-theme='dark'] .product,
html[data-theme='dark'] .product-mini,
html[data-theme='dark'] .contact-card {
  background: var(--theme-surface);
  border-color: var(--theme-border-strong);
  color: var(--theme-text);
}

html[data-theme='dark'] .product:hover,
html[data-theme='dark'] .product-mini:hover {
  box-shadow: 8px 9px 0 var(--theme-shadow);
}

html[data-theme='dark'] .product p,
html[data-theme='dark'] .section-copy,
html[data-theme='dark'] .page-content p,
html[data-theme='dark'] .page-content ul,
html[data-theme='dark'] .page-content ol,
html[data-theme='dark'] .note,
html[data-theme='dark'] .faq p {
  color: var(--theme-copy);
}

html[data-theme='dark'] .product h3 span,
html[data-theme='dark'] .product-port,
html[data-theme='dark'] .product-tag,
html[data-theme='dark'] .product-mini span,
html[data-theme='dark'] .contact-card p,
html[data-theme='dark'] .contact-card small {
  color: var(--theme-muted);
}

html[data-theme='dark'] .hero:before {
  opacity: .38;
}

html[data-theme='dark'] .mark {
  background: #080b0d;
}

html[data-theme='dark'] .brand::before {
  background-color: #080b0d;
}

html[data-theme='dark'] .product-number {
  border-color: var(--theme-border-strong);
}

html[data-theme='dark'] .product:after {
  opacity: .3;
}

html[data-theme='dark'] .nav-cta,
html[data-theme='dark'] .site-nav .button,
html[data-theme='dark'] .about-cta .button {
  border-color: var(--theme-border-strong);
  color: var(--theme-text) !important;
}

html[data-theme='dark'] .about-cta .button {
  color: #101417 !important;
}

html[data-theme='dark'] .site-nav .button {
  color: #101417 !important;
}

html[data-theme='dark'] .nav-cta:hover,
html[data-theme='dark'] .site-nav .button:hover,
html[data-theme='dark'] .about-cta .button:hover {
  border-color: var(--theme-text);
  background: var(--theme-text);
  color: #101417 !important;
}

html[data-theme='dark'] .about-cta,
html[data-theme='dark'] .contact-card.accent {
  background: #080b0d;
  border-color: #080b0d;
}

html[data-theme='dark'] .legal-header,
html[data-theme='dark'] .page-intro,
html[data-theme='dark'] .faq details {
  border-color: var(--theme-border);
}

html[data-theme='dark'] .legal-nav {
  border-color: var(--theme-text);
}

html[data-theme='dark'] .legal-nav a:hover,
html[data-theme='dark'] .site-nav a:hover {
  color: var(--theme-text);
}

html[data-theme='dark'] .page-content a {
  text-decoration-color: #b8d94b;
}

html[data-theme='dark'] .note {
  background: rgba(216,255,62,.1);
}

html[data-theme='dark'] .site-footer,
html[data-theme='dark'] footer {
  background: #080b0d;
}

html[data-theme='dark'] .site-footer-bottom,
html[data-theme='dark'] .footer-bottom {
  border-color: rgba(255,255,255,.16);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--theme-border-strong);
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: var(--theme-text);
  cursor: pointer;
  font: 700 .75rem/1 'Fira Sans', Arial, sans-serif;
}

.theme-toggle:hover {
  background: var(--theme-surface-raised);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--theme-focus);
  outline-offset: 4px;
}

.theme-toggle-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.nav-links .theme-toggle {
  order: 3;
}

@media (max-width: 760px) {
  .nav-links {
    gap: 10px;
  }
}

@media (max-width: 520px) {
  .theme-toggle {
    width: 36px;
    height: 36px;
  }

  .brand::before,
  .site-footer-logo::before {
    width: 31px;
    height: 31px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}