html {
  color: light-dark(var(--color-black), var(--color-white));
  background-color: light-dark(var(--color-white), var(--color-zinc-900));
}

.logo {
  filter: var(--logo-filter-default);

  &:hover {
    filter: var(--logo-filter-hover);
  }

  &:active {
    filter: var(--logo-filter-active);
  }
}

.bug {
  filter: var(--bug-filter-default);
}

#main {
  background-color: light-dark(var(--color-neutral-50), var(--color-zinc-900));
}

.nav {
  background-color: light-dark(var(--color-white), var(--color-zinc-900));
  border-bottom: 1px solid
    light-dark(var(--color-gray-200), var(--color-zinc-800));
}

#footer {
  color: light-dark(var(--color-gray-500), var(--color-zinc-400));
}

.demo-mode-badge {
  position: sticky;
  top: 0;
  z-index: 40;
}

.demo-mode-badge__bar {
  background-color: light-dark(var(--color-orange-500), var(--color-pink-300));
  padding-top: 1px;
  padding-bottom: 1px;
}

.demo-mode-badge__label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: light-dark(var(--color-orange-500), var(--color-pink-300));
  color: light-dark(var(--color-white), var(--color-slate-900));
  text-align: center;
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  padding-top: 0.05rem;
  padding-bottom: 0.05rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.section-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  font-weight: 600;
  color: light-dark(var(--color-gray-500), var(--color-zinc-400));
}

.error-header {
  width: 100%;
  padding-top: 2rem;
  border-bottom: 1px solid
    light-dark(var(--color-gray-200), var(--color-zinc-800));
  background-color: light-dark(var(--color-white), var(--color-zinc-900));
}

.backdrop {
  background-color: light-dark(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.75));
}

.marketing-gradient {
  --radial-tint: light-dark(
    transparent,
    color-mix(in oklab, var(--color-blue-400) 15%, transparent)
  );

  --g-start: light-dark(#ffffff, var(--color-zinc-900));
  --g-mid: light-dark(#dbeafe, var(--color-zinc-850, var(--color-zinc-900)));
  --g-accent: light-dark(
    #bfdbfe,
    color-mix(in oklab, var(--color-blue-900) 60%, var(--color-zinc-900))
  );

  background: radial-gradient(
      140% 100% at 50% -20%,
      var(--radial-tint),
      transparent 65%
    ),
    linear-gradient(
      165deg,
      var(--g-start) 0%,
      var(--g-start) 22%,
      var(--g-mid) 45%,
      var(--g-accent) 100%
    );
}

.version-info {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  font-weight: 600;
  color: light-dark(var(--color-sky-800), var(--color-pink-100));
}